/* =========================================================================
   Design Warehouse — tokens.css
   Design tokens: colour, type, space, layout, motion.
   Nothing in here paints; it only declares.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------
     1. COLOUR
     One accent. No pure black, no pure white.
     --------------------------------------------------------------- */
  --ink:            #0B0B0C;
  --ink-soft:       #141416;
  --ink-lift:       #1C1C1F;
  --paper:          #F3F0EA;
  --paper-deep:     #E7E2D9;
  --paper-lift:     #FAF8F4;

  --clay:           #C0603A;
  --clay-soft:      #D4794F;
  /* Darker cut of the accent, for accent-coloured TEXT on light surfaces.
     --clay only reaches 3.7:1 on paper, which is fine for a rule or a rule
     dot and not fine for a word. */
  --clay-ink:       #A4471F;
  --brass:          #B08D57;

  /* Alphas are set so that muted copy clears 4.5:1 on its own theme. */
  --muted-dark:     rgba(243, 240, 234, 0.56);
  --muted-light:    rgba(11, 11, 12, 0.66);

  --hair-dark:      rgba(243, 240, 234, 0.14);
  --hair-light:     rgba(11, 11, 12, 0.14);
  --hair-strong-dark: rgba(243, 240, 234, 0.28);
  --hair-strong-light: rgba(11, 11, 12, 0.26);

  /* ---------------------------------------------------------------
     2. TYPE
     --------------------------------------------------------------- */
  --font-display: "Instrument Serif", "Songti SC", "Source Han Serif SC",
                  Georgia, "Times New Roman", serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                  system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono",
                  "Roboto Mono", Menlo, monospace;

  --fs-display: clamp(2.4rem, 8.2vw, 8.6rem);
  --fs-h1:      clamp(2.6rem, 7.6vw, 6.6rem);
  --fs-h2:      clamp(2rem, 5.2vw, 4.2rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.85rem);
  --fs-h4:      clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-lead:    clamp(1.05rem, 1.55vw, 1.4rem);
  --fs-body:    clamp(0.975rem, 1.05vw, 1.0625rem);
  --fs-small:   0.8125rem;
  --fs-meta:    0.6875rem;

  --lh-display: 0.92;
  --lh-tight:   1.04;
  --lh-head:    1.14;
  --lh-body:    1.66;

  --ls-display: -0.032em;
  --ls-head:    -0.018em;
  --ls-meta:    0.16em;
  --ls-wide:    0.24em;

  /* ---------------------------------------------------------------
     3. SPACE  (8px base)
     --------------------------------------------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  24px;  --s-6:  32px;  --s-7:  48px;  --s-8:  64px;
  --s-9:  96px;  --s-10: 128px; --s-11: 176px; --s-12: 240px;

  --section-y: clamp(88px, 13vh, 200px);
  --gutter:    clamp(20px, 4vw, 56px);
  --shell-max: 1560px;

  /* Left padding of the content column. From 1281px up the section rail
     claims a band on the left, so the column steps across to make room for
     it. Everything that needs to align with the text uses this, not --gutter. */
  --pad-left:  var(--gutter);

  /* ---------------------------------------------------------------
     4. LAYOUT
     --------------------------------------------------------------- */
  --topbar-h: 68px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     5. MOTION
     Slow in, fast out. Opacity / transform / clip-path / dash only.
     --------------------------------------------------------------- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.50, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:      cubic-bezier(0.33, 0, 0.15, 1);

  --dur-1: 180ms;   /* hover            */
  --dur-2: 320ms;   /* state change     */
  --dur-3: 600ms;   /* reveal           */
  --dur-4: 900ms;   /* curtain / bar    */
  --dur-5: 1200ms;  /* hero entrance    */

  --stagger: 70ms;
  --stagger-line: 110ms;

  /* ---------------------------------------------------------------
     6. Z-INDEX SCALE
     --------------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  10;
  --z-rail:    40;
  --z-topbar:  50;
  --z-progress:55;
  --z-grain:   60;
  --z-curtain: 80;
  --z-skip:    90;
}

/* -----------------------------------------------------------------
   SECTION THEMES — flip the semantic aliases, never the raw hues.
   ----------------------------------------------------------------- */
.theme-dark {
  --bg:    var(--ink);
  --bg-alt:var(--ink-soft);
  --fg:    var(--paper);
  --muted: var(--muted-dark);
  --hair:  var(--hair-dark);
  --hair-strong: var(--hair-strong-dark);
  --accent-text: var(--clay-soft);
  color-scheme: dark;
}

.theme-light {
  --bg:    var(--paper);
  --bg-alt:var(--paper-deep);
  --fg:    var(--ink);
  --muted: var(--muted-light);
  --hair:  var(--hair-light);
  --hair-strong: var(--hair-strong-light);
  --accent-text: var(--clay-ink);
  color-scheme: light;
}