/* =============================================================================
 * DESIGN TOKENS — VERITY · "Clarity with substance"
 * -----------------------------------------------------------------------------
 * Warm, editorial and grounded: parchment/bone surfaces (little pure white),
 * charcoal ink for text, deep pine & forest for authority and action, bronze as
 * a refined accent, moss/taupe as neutrals. No blue anywhere.
 *
 * Legacy variable names (‑‑cobalt/‑‑iris/‑‑mint/‑‑periwinkle/‑‑clay…) are RETAINED
 * as aliases that resolve to the Verity palette, so component rules that still
 * reference them render in-brand — there is no blue value left to leak. These
 * aliases are a deliberate compatibility layer (see cleanup notes), not overrides.
 * ===========================================================================*/

:root {
  /* ---- Verity core palette — Black & Purple ----------------------------- */
  --black: #050506;       /* deepest base (near-black, never pure #000)  */
  --graphite: #0A090D;    /* main dark surface                          */
  --surf: #111014;        /* cards — graphite, a touch lifted           */
  --purple: #7C3AED;      /* deep purple — primary action               */
  --purple-strong: #4C1D95;
  --violet: #9B6BFF;      /* violet — highlights / active               */
  --lilac: #CDB8FF;       /* lilac — small details, accent TEXT on dark */
  --off-white: #F7F5FA;   /* primary text                               */
  --muted-txt: #AAA4B1;   /* secondary text (AA on dark)                */
  --purple-line: rgba(205, 184, 255, 0.14);

  /* Legacy names → Black & Purple (no green/bronze value remains) */
  --ink: var(--black);            /* "the dark" — deep fills / shadows */
  --pine: var(--black);
  --forest: var(--purple);        /* primary accent → deep purple */
  --moss: var(--violet);
  --parchment: var(--graphite);   /* warm→dark alternation surface */
  --bone: var(--graphite);        /* page base band */
  --soft-white: var(--surf);      /* cards */
  --bronze: var(--violet);        /* accent detail → violet */
  --bronze-ink: var(--lilac);     /* accent text → lilac (AA) */
  --taupe: var(--muted-txt);
  --obsidian: var(--black);
  --deep-slate: #111014;
  --porcelain: var(--graphite);
  --paper: var(--graphite);
  --white: var(--surf);
  --cobalt: var(--purple);
  --clay: var(--violet);
  --gray: var(--muted-txt);
  --mint: var(--purple);
  --periwinkle: var(--violet);
  --muted: var(--muted-txt);
  --verity-line: var(--purple-line);
  --mint-12: color-mix(in srgb, var(--purple) 14%, transparent);
  --mint-20: color-mix(in srgb, var(--purple) 22%, transparent);
  --peri-12: color-mix(in srgb, var(--violet) 14%, transparent);
  --peri-20: color-mix(in srgb, var(--violet) 22%, transparent);
  --clay-10: color-mix(in srgb, var(--violet) 16%, transparent);

  /* ---- Typography ------------------------------------------------------- */
  /* One primary family (Instrument Sans) for UI, body, numbers and titles.
     Source Serif 4 used sparingly for editorial emphasis. */
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);   /* legacy alias */
  --font-mono: var(--font-body);      /* legacy alias — no monospace UI */

  /* Fluid type scale (clamp) — min 320px → max ~1280px. Comfortable, legible. */
  --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.83rem);   /* labels/eyebrows 12.5→13.3 */
  --step-0:  clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);    /* body 16→17 */
  --step-1:  clamp(1.125rem, 1.05rem + 0.32vw, 1.28rem);  /* large text / card titles 18→20.5 */
  --step-2:  clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem);     /* H3 20.8→28 */
  --step-3:  clamp(1.55rem, 1.3rem + 1.2vw, 2.25rem);     /* 24.8→36 */
  --step-4:  clamp(1.95rem, 1.5rem + 2vw, 3.25rem);       /* H2 31→52 */
  --step-5:  clamp(2.35rem, 1.55rem + 3.4vw, 4.25rem);    /* H1 37.6→68 */

  --lh-tight: 1.04;   /* large display titles */
  --lh-snug: 1.14;    /* intermediate titles */
  --lh-body: 1.62;    /* body copy */
  --control-h: 50px;  /* unified height for input/select controls */
  --lh-control: 1.3;  /* line box inside form controls (fits --control-h) */
  --measure: 66ch;    /* comfortable paragraph width (~55–68 chars) */
  --tracking-label: 0.01em;

  /* ---- Spacing — strict 4 / 8 scale ------------------------------------- */
  --space-2xs: 0.25rem;  /*  4 — micro */
  --space-xs:  0.5rem;   /*  8 — related elements */
  --space-sm:  0.75rem;  /* 12 — label → title */
  --space-md:  1rem;     /* 16 — compact */
  --space-lg:  1.5rem;   /* 24 — standard internal */
  --space-xl:  2rem;     /* 32 — intermediate */
  --space-2xl: 3rem;     /* 48 — larger groups */
  --space-3xl: 4rem;     /* 64 — big separation */
  --space-4xl: 5rem;     /* 80 */
  /* Section rhythm: mobile ~48 → tablet ~58 → desktop ~92 (varies with content). */
  --section-y: clamp(3rem, 1.9rem + 3.6vw, 5.75rem);
  --section-head-gap: clamp(2rem, 1.6rem + 1vw, 2.75rem);  /* header → content 32→44 */

  /* ---- Radii (restrained) ---------------------------------------------- */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;
  --btn-radius: 10px;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 720px;
  /* Side padding: mobile 20 → tablet ~27 → desktop ~36–48 */
  --gutter: clamp(1.25rem, 0.85rem + 1.9vw, 3rem);
  --header-h: 66px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 480ms;

  /* ---- Semantic (DARK — default, black & graphite) --------------------- */
  color-scheme: dark;
  --bg: var(--black);                 /* deepest base (not pure black) */
  --surface: var(--surf);             /* cards — graphite, subtle lift */
  --surface-2: var(--graphite);
  --surface-3: #19151F;
  --text: var(--off-white);
  --text-strong: #ffffff;
  --text-muted: var(--muted-txt);     /* AA on dark */
  --border: var(--purple-line);
  --border-strong: rgba(205, 184, 255, 0.24);
  --accent: var(--purple);            /* fills / buttons */
  --accent-strong: var(--purple-strong);
  --accent-ink: var(--lilac);         /* links / accent TEXT on dark (~9:1) */
  --accent-2: var(--violet);          /* active / positive marks */
  --accent-bronze: var(--violet);     /* secondary accent */
  --accent-bronze-ink: var(--lilac);  /* accent text that meets AA */
  --on-accent: #ffffff;               /* text on purple button (~7:1) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.6);
  --grid-line: transparent;           /* kill technical grids */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet);

  /* =========================================================================
   * VERITY LIGHT & MOTION — derived color, light, surface, motion.
   * Consumed by css/verity.css. Derived tints for ambient purple light and
   * accents — never for body text, so WCAG AA contrast is preserved.
   * =======================================================================*/
  /* Derived colour — purple energy, violet/lilac highlights */
  --forest-lum: #8B5CF6;   /* lifted purple — energy / progress points       */
  --bronze-lum: var(--lilac);/* highlight → lilac                            */
  --pine-deep-2: #050506;  /* deepest black — CTA depth background            */

  /* Translucent identity tints (borders / fills / washes) */
  --tint-forest: color-mix(in srgb, var(--purple) 18%, transparent);
  --tint-forest-soft: color-mix(in srgb, var(--purple) 9%, transparent);
  --tint-bronze: color-mix(in srgb, var(--violet) 20%, transparent);
  --hairline: color-mix(in srgb, var(--lilac) 12%, transparent);

  /* Light / glow system — purple, low alpha, radial built in pseudo */
  --glow-1: var(--purple);   /* primary purple light            */
  --glow-2: var(--violet);   /* violet highlight                */
  --glow-3: var(--purple-strong);
  --glow-alpha: 0.20;        /* base opacity — controlled on black */
  --glow-size: 40rem;
  --surface-glass: color-mix(in srgb, var(--bg) 78%, transparent);

  /* Per-page accent (overridden per body[data-page]) */
  --page-accent: var(--purple);
  --page-accent-2: var(--violet);

  /* Motion */
  --reveal-shift: 18px;
  --reveal-dur: 600ms;
  --stagger: 80ms;
  --ease-lum: cubic-bezier(0.22, 1, 0.36, 1);
  --float-dur: 18s;
  --sheen-dur: 900ms;
}

/* ---- GRAPHITE band (subtle dark alternation) ------------------------------ */
[data-theme='paper'] {
  --bg: var(--graphite);
  --surface: var(--surf);
  --surface-2: #19151F;
  --surface-3: #19151F;
  --border: var(--purple-line);
}

/* ---- LIGHT (now a graphite band — explicit) ------------------------------- */
[data-theme='light'] {
  color-scheme: dark;
  --bg: var(--graphite);
  --surface: var(--surf);
  --surface-2: #19151F;
  --surface-3: #19151F;
  --text: var(--off-white);
  --text-strong: #ffffff;
  --text-muted: var(--muted-txt);
  --border: var(--purple-line);
  --border-strong: rgba(205, 184, 255, 0.24);
  --accent: var(--purple);
  --accent-ink: var(--lilac);
  --accent-2: var(--violet);
  --on-accent: #ffffff;
  --grid-line: transparent;
}

/* ---- DARK (deepest black + stronger purple — CTA / footer depth) --------- */
[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--black);
  --surface: #111014;
  --surface-2: #111014;
  --surface-3: #19151F;
  --text: var(--off-white);
  --text-strong: #ffffff;
  --text-muted: #B5AFC0;              /* light purple-gray */
  --border: rgba(205, 184, 255, 0.16);
  --border-strong: rgba(205, 184, 255, 0.28);
  --accent: var(--purple);
  --accent-strong: #8B5CF6;
  --accent-ink: var(--lilac);
  --accent-2: var(--violet);
  --accent-bronze: var(--violet);
  --accent-bronze-ink: var(--lilac);
  --on-accent: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.65);
  --grid-line: transparent;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet);
  /* Purple glow reads on deep black; lift ambient alpha slightly. */
  --glow-1: var(--purple);
  --glow-2: var(--violet);
  --glow-alpha: 0.28;
  --hairline: color-mix(in srgb, var(--lilac) 14%, transparent);
  --surface-glass: color-mix(in srgb, var(--bg) 72%, transparent);
}