/* ==========================================================
   MIEN TREATS — design tokens
   Colours are sampled from the logo (plum lettering, rose
   ribbon, gold whisk) on the warm cream of the brand mark.
   The Gallery page keeps its own dark stage inside /gallery.
   ========================================================== */
:root {
  /* colour */
  --ink:        #2A0F1B;   /* deep aubergine — body text */
  --plum:       #5B1533;   /* logo lettering */
  --plum-soft:  #7A2A4B;
  --rose:       #C0446F;   /* logo ribbon — large text / accents only */
  --rose-text:  #A2325E;   /* same hue, dark enough (4.5:1) for small text */
  --blush:      #EBC3CF;
  --gold:       #C99A5B;   /* logo whisk */
  --gold-bright:#E4B46C;
  --cream:      #F4EADF;   /* page background */
  --cream-deep: #EADACA;   /* logo backdrop / panels */
  --paper:      #FBF6EF;   /* raised surfaces */

  /* type */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body:    "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem,    0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
  --step-2:  clamp(1.6rem,  1.35rem + 1.20vw, 2.3rem);
  --step-3:  clamp(2.1rem,  1.6rem  + 2.40vw, 3.6rem);
  --step-4:  clamp(2.8rem,  1.9rem  + 4.20vw, 5.6rem);

  /* space & shape */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2.5rem;  --space-5: 4rem;   --space-6: 6.5rem;
  --gutter:  clamp(1.1rem, 4vw, 3.5rem);
  --maxw:    78rem;
  --radius:  2px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);
  --dur-fast: 220ms;
  --dur-med:  600ms;
  --dur-slow: 1100ms;
}