/* ============================================================================
   SKOUT — DESIGN TOKENS
   Single source of truth. Change a value here → it propagates everywhere.
   This file is the cure for "every edit makes it look worse": no magic numbers
   in components, only token references.
   Palette 01 — Warm Premium (terracotta). Type: Fraunces (display) + Inter (body).
   ============================================================================ */

:root {

  /* ---- COLOR ---------------------------------------------------------------
     Warm cream canvas, charcoal ink, terracotta accent. Sage as rare second. */
  --c-bg:          #FAF7F2;   /* page background — warm cream            */
  --c-bg-2:        #F1E9DC;   /* raised / alternate panels               */
  --c-bg-3:        #E7DCC9;   /* hairlines, faint fills                  */
  --c-ink:         #1E1B18;   /* primary text, dark panels              */
  --c-ink-2:       #3A352F;   /* secondary heading ink                  */
  --c-ink-soft:    rgba(30, 27, 24, 0.66);  /* body copy on cream       */
  --c-ink-faint:   rgba(30, 27, 24, 0.42);  /* labels, meta             */
  --c-accent:      #C45B3C;   /* terracotta — the one sharp accent      */
  --c-accent-deep: #A8482D;   /* terracotta pressed / hover             */
  --c-accent-soft: rgba(196, 91, 60, 0.16); /* accent wash             */
  --c-accent-ink:  #FFF7F3;   /* text on terracotta                     */
  --c-sage:        #7A8A6F;   /* rare secondary                         */

  /* On dark (ink) panels */
  --c-on-dark:        #F7F1E8;            /* text on ink                 */
  --c-on-dark-soft:   rgba(247, 241, 232, 0.68);
  --c-on-dark-faint:  rgba(247, 241, 232, 0.40);
  --c-line-dark:      rgba(247, 241, 232, 0.14); /* hairline on ink     */

  /* Decorative line / marks — charcoal ink, like openingline (reads as hand
     annotation; same hue as text, distinguished by being thin offset curves) */
  --c-mark:        #1E1B18;                  /* hand-drawn marks         */
  --c-spine:       rgba(30, 27, 24, 0.34);   /* page weave line          */

  color-scheme: light;

  /* ---- TYPE ----------------------------------------------------------------
     Fraunces = editorial display serif (characterful, not generic).
     Inter = refined body. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale (clamp is safe here — layout is normal flow, not pixel-pinned) */
  --step--1: clamp(0.80rem, 0.78rem + 0.12vw, 0.86rem);   /* small labels   */
  --step-0:  clamp(0.95rem, 0.93rem + 0.14vw, 1.04rem);   /* body           */
  --step-1:  clamp(1.12rem, 1.04rem + 0.34vw, 1.30rem);   /* lead / large   */
  --step-2:  clamp(1.40rem, 1.22rem + 0.85vw, 1.85rem);   /* h2 small       */
  --step-3:  clamp(1.85rem, 1.45rem + 1.70vw, 2.70rem);   /* h2 / statement */
  --step-4:  clamp(2.60rem, 1.85rem + 4.60vw, 6.00rem);   /* hero / display — openingline-scale (~96px @1440) */

  --leading-tight: 1.06;
  --leading-snug:  1.22;
  --leading-body:  1.6;

  --tracking-tight: -0.022em;
  --tracking-label: 0.14em;

  /* ---- SPACE (4px base scale) --------------------------------------------- */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */
  --sp-11: 11rem;     /* 176 — section rhythm on desktop */

  /* Section vertical rhythm (fluid). Tuned so total content height matches the
     lifted openingline line length (VB_H in gen-line.py), so the line spans the
     whole page top-to-bottom. */
  --section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  /* ---- LAYOUT -------------------------------------------------------------- */
  --wrap-max: 1180px;
  --wrap-pad: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --measure:  62ch;   /* readable line length cap */

  /* ---- MARK TUNING ---------------------------------------------------------
     Each hand-drawn mark (ring / underline / arrow) is absolutely positioned
     over its word. These vars are the ONLY knobs that pin a mark to its text.
     Re-fit a mark after a copy / font / size change by editing it HERE — never
     touch the component CSS. This is what stops "every edit breaks the marks":
     the offsets live in one labelled place, decoupled from the words.        */

  /* Ring — encircles a word (hero: "room"). Tuned 2026-06-10 with a Playwright
     param sweep so the tail lands in the (widened) inter-word gap and never
     touches the next word — see --ring-gap + .ring-wrap margin. */
  --ring-w:   153%;     /* width vs word box; larger = more clearance around it */
  --ring-x:   -49.7%;   /* loop centred on word (solved from path loop centroid)*/
  --ring-y:   -44.3%;   /* vertical centre offset (solved from path centroid)   */
  --ring-rot: -5deg;    /* tilt lifts the tail tip up into the inter-word gap   */
  --ring-gap: 0.30em;   /* extra space after the ringed word = tail landing room */

  /* Underline — sits under a word ("works." / "AI-native."). */
  --ul-w:     114%;     /* width vs word box                                    */
  --ul-x:     -2%;      /* horizontal nudge                                     */
  --ul-y:     0.06em;   /* gap below the word (bottom offset)                   */

  /* Hero arrow — sweeps in and points into the headline. */
  --arrow-w:  clamp(112px, 11vw, 170px);      /* size                          */
  --arrow-x:  clamp(-4.5rem, -7vw, -2.5rem);  /* horizontal position (left)    */
  --arrow-y:  4.4em;                          /* vertical drop — head aims at L2 */

  /* ---- RADIUS ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- SHADOW (warm-tinted, not generic gray) ----------------------------- */
  --shadow-sm: 0 2px 10px rgba(60, 40, 30, 0.06);
  --shadow-md: 0 18px 50px rgba(60, 40, 30, 0.10);
  --shadow-lg: 0 40px 90px rgba(40, 25, 18, 0.16);

  /* ---- MOTION ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);    /* gentle settle      */
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);    /* in-out             */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.22s;
  --t-med:  0.45s;
  --t-slow: 0.9s;

  /* ---- GRAIN / TEXTURE OPACITY -------------------------------------------- */
  --grain-opacity: 0.04;
}

/* ============================================================================
   DARK THEME — toggled via <html data-theme="dark"> (button in header, JS).
   Only flips background + text/line colors (cream <-> charcoal); terracotta
   accent carries across both. Every component reads tokens, so this is the
   whole theme — no per-component dark rules needed.
   ============================================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:          #1B1815;   /* warm near-black                          */
  --c-bg-2:        #26221D;
  --c-bg-3:        #3A342C;   /* hairlines                                */
  --c-ink:         #F4EEE4;   /* cream text                               */
  --c-ink-2:       #E7DECF;
  --c-ink-soft:    rgba(244, 238, 228, 0.66);
  --c-ink-faint:   rgba(244, 238, 228, 0.40);

  --c-accent:      #D6774F;   /* terracotta, nudged brighter for dark bg  */
  --c-accent-deep: #C45B3C;
  --c-accent-soft: rgba(214, 119, 79, 0.16);
  --c-accent-ink:  #1B1815;

  /* line + marks become cream so they read on the dark canvas */
  --c-mark:        #F4EEE4;
  --c-spine:       rgba(244, 238, 228, 0.28);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.55);

  --grain-opacity: 0.05;
}

/* Smooth the cream<->charcoal flip */
html { transition: background-color var(--t-med) var(--ease-out); }
body { transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out); }