/* ============================================================
   DAMASCENE — Design tokens
   Palette is the official brand system only. No off-palette hues.
   Gold appears exclusively inside photography, never in the UI.
   ============================================================ */
:root{
  /* --- Official palette ------------------------------------ */
  --rose:        #791A54;   /* Damask Rose      Pantone 242 C   */
  --sand:        #F1E0D6;   /* Citadel Sand     Pantone 4031 C  */
  --pearl:       #FFFFFF;   /* Mastic Pearl                     */
  --ink:         #000000;   /* Midnight Cardamom Pantone Black 6*/

  /* --- Sanctioned tints / shades (the % ladder in §3.1) ----- */
  --rose-120:    #4E0F35;
  --rose-90:     #85275F;
  --rose-60:     #AF7396;
  --rose-25:     #DCC4D2;
  --sand-dark:   #DCC5B7;
  --sand-deep:   #B99C8B;
  --ink-90:      #0A0708;
  --ink-70:      #201A1D;
  --ink-40:      #6B6266;

  /* --- Semantic -------------------------------------------- */
  --bg:          var(--ink);
  --fg:          var(--sand);
  --rule:        color-mix(in oklab, var(--sand) 22%, transparent);

  /* --- Type ---------------------------------------------------
     Editorial, not enormous. Each step states the pixel range it
     resolves to between a 360px phone and a 1920px desktop.        */
  --font-display: "Gravite Elevaty", "Times New Roman", serif;
  --font-ui:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero:  clamp(2.35rem, 5.8vw,  6.6rem);  /* 38 → 106  ( 84 @1440) */
  --t-xxl:   clamp(2.05rem, 4.3vw,  4.9rem);  /* 33 →  78  ( 62 @1440) */
  --t-xl:    clamp(1.8rem,  3.35vw, 3.85rem); /* 29 →  62  ( 48 @1440) */
  --t-lg:    clamp(1.6rem,  2.6vw,  3rem);    /* 26 →  48  ( 37 @1440) */
  --t-md:    clamp(1rem,    1.12vw, 1.3rem);  /* 16 →  21  ( 16 @1440) */
  --t-sm:    clamp(0.88rem, 0.96vw, 1rem);    /* 14 →  16              */
  --t-xs:    0.7rem;                          /* 11.2 — labels only    */

  /* chrome defaults match the ground the page opens on (Citadel Sand),
     so the masthead is never briefly sand-on-sand before the observer runs */
  --mast-fg: #000000;
  /* the mark carries the house colour rather than the chrome's, so it is
     tracked separately from --mast-fg: on Citadel Sand it is Damask Rose */
  --logo-fg: #791A54;
  --mast-veil: #F1E0D6;
  --shopbtn-on: #F1E0D6;
  --prog-fg: #000000;

  --rule-on-rose: color-mix(in oklab, #F1E0D6 22%, transparent);

  --radius-plate: clamp(6px, .9vw, 14px);

  --track-label: 0.26em;
  --track-mega: -0.022em;

  /* --- Space ------------------------------------------------ */
  --gut:  clamp(1.15rem, 4.1vw, 4.5rem);
  --edge: clamp(1.15rem, 3.2vw, 3.25rem);
  --stack-s: clamp(.7rem, 1.2vw, 1.1rem);
  --stack-m: clamp(1.5rem, 3vw, 2.6rem);
  --stack-l: clamp(3rem, 7vw, 7rem);
  --scene-y: clamp(5.5rem, 12vh, 11rem);

  /* --- Motion ----------------------------------------------- */
  --e-out:   cubic-bezier(.16,1,.3,1);       /* expo out         */
  --e-inout: cubic-bezier(.76,0,.24,1);      /* firm, authored   */
  --e-soft:  cubic-bezier(.33,1,.68,1);
  /* the house curve: slow to leave, long to arrive — everything that
     moves under a pointer uses this so the whole page shares one hand */
  --e-lux:   cubic-bezier(.22,.61,.24,1);
  --d-fast: .32s;
  --d-mid:  .68s;
  --d-slow: 1.15s;
  --d-lux:  .82s;

  /* --- Shape ------------------------------------------------ */
  /* An ogee-ish arch in objectBoundingBox units. CSS path() only accepts
     pixels, so the shape lives in an inline <clipPath> and scales with the box. */
  --arch: url(#arch);
  --radius-pill: 100px;

  --vh: 1vh;
  color-scheme: dark;
}

/* Scene colour contexts — every scene declares its own ground so the
   whole page can be recoloured from one place. */
.ctx-ink   { --bg: var(--ink);  --fg: var(--sand);  --rule: color-mix(in oklab, var(--sand) 20%, transparent); }
.ctx-rose  { --bg: var(--rose); --fg: var(--sand);  --rule: color-mix(in oklab, var(--sand) 30%, transparent); }
.ctx-sand  { --bg: var(--sand); --fg: var(--ink);   --rule: color-mix(in oklab, var(--ink)  20%, transparent); }
.ctx-pearl { --bg: var(--pearl);--fg: var(--ink);   --rule: color-mix(in oklab, var(--ink)  14%, transparent); }