/* ============================================================
   PYVOT DESIGN SYSTEM — TOKENS
   ------------------------------------------------------------
   Single source of truth. Three layers:
     1. PRIMITIVES  — raw palette + channels (don't reference in components)
     2. SEMANTIC    — roles components actually use (surface/text/border/brand…)
     3. SCALE       — typography, spacing, radius, shadow, motion, layout
   THEMES at the bottom repaint the SEMANTIC layer only.
   To make a variant: override semantic + scale tokens in a [data-theme] block.
   To make a new design: duplicate a theme block and re-map.
   Full guide: docs/DESIGN_SYSTEM.md
   ============================================================ */

:root{
  /* ── 1. PRIMITIVE PALETTE ───────────────────────────── */
  --c-dark:#14181d;          /* primary dark surface */
  --c-dark-deep:#0a0c0e;     /* deepest (footer strip / body) */
  --c-mid:#1e2328;           /* secondary dark surface */
  --c-panel:#252a30;         /* raised panel */
  --c-ink:#0e1012;           /* near-black ink (text on brand/light) */
  --c-paper:#f5f3ef;         /* warm light surface */
  --c-line:#d4d0c8;          /* hairline on paper */
  --c-line-light:#ddd;       /* hairline / grid gaps on white */
  --c-muted:#8c9098;         /* muted gray text */
  --c-text-light-soft:#5a5752;/* body text on light surfaces */
  --c-accent:#686a51;        /* brand accent (olive) */
  --c-orange:#e8601a;        /* secondary accent */
  --c-white:#fff;

  /* Channels — for building alpha tiers via rgba(var(--ch-x), a).
     A theme can repaint every translucent text/border/shadow at once
     by changing just these. */
  --ch-light:255,255,255;
  --ch-dark:14,16,18;
  --ch-black:0,0,0;
  --ch-accent:104,106,81;
  --ch-orange:232,96,26;

  /* ── 2. SEMANTIC ROLES ──────────────────────────────── */
  /* Surfaces */
  --surface-dark:var(--c-dark);        /* nav, why, proof, footer-cta */
  --surface-darker:var(--c-dark-deep); /* page bg, footer strip */
  --surface-mid:var(--c-mid);          /* credentials bar */
  --surface-light:var(--c-white);      /* capabilities, experience */
  --surface-paper:var(--c-paper);      /* warm light alt */
  --surface-brand:var(--c-accent);     /* hero panel, stats bar, hero tag */

  /* Text on dark surfaces (alpha tiers of --ch-light) */
  --text-on-dark:var(--c-white);
  --text-on-dark-1:rgba(var(--ch-light),.8);   /* strong */
  --text-on-dark-2:rgba(var(--ch-light),.72);  /* body / lede */
  --text-on-dark-3:rgba(var(--ch-light),.6);
  --text-on-dark-4:rgba(var(--ch-light),.55);
  --text-on-dark-5:rgba(var(--ch-light),.45);  /* labels / meta */
  --text-on-dark-faint:rgba(var(--ch-light),.28);
  --text-on-dark-ghost:rgba(var(--ch-light),.2);

  /* Text on light surfaces */
  --text-on-light:var(--c-ink);
  --text-on-light-soft:var(--c-text-light-soft);
  --text-on-light-muted:var(--c-muted);

  /* Text on brand surface */
  --text-on-brand:var(--c-ink);
  --text-on-brand-soft:rgba(var(--ch-dark),.65);

  /* Brand */
  --brand:var(--c-accent);
  --brand-contrast:var(--c-ink);   /* readable text/icon on --brand */
  --brand-2:var(--c-orange);

  /* Borders */
  --border-on-dark:rgba(var(--ch-light),.1);
  --border-on-dark-soft:rgba(var(--ch-light),.08);
  --border-on-dark-faint:rgba(var(--ch-light),.07);
  --border-on-dark-strong:rgba(var(--ch-light),.12);
  --border-on-light:var(--c-line);
  --border-on-light-gap:var(--c-line-light);
  --border-brand:var(--c-accent);

  /* Accent washes (hover tints, glows, watermarks) */
  --accent-wash:rgba(var(--ch-accent),.04);
  --accent-wash-2:rgba(var(--ch-accent),.3);
  --accent-glow:rgba(var(--ch-accent),.35);
  --accent-glow-soft:rgba(var(--ch-accent),.15);

  /* ── 3a. TYPOGRAPHY ─────────────────────────────────── */
  --font-display:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif;
  --font-body:Inter,Arial,Helvetica,sans-serif;
  --font-mono:"IBM Plex Mono","Roboto Mono",ui-monospace,monospace;

  /* Display scale (uppercase, condensed headings) */
  --fs-hero:clamp(52px,5.1vw,78px);
  --fs-h1:clamp(56px,6vw,100px);
  --fs-h2:clamp(48px,5.5vw,88px);
  --fs-h3:clamp(48px,5vw,80px);
  --fs-h4:clamp(28px,2.6vw,42px);
  --fs-h5:clamp(24px,2vw,32px);
  --fs-h6:clamp(22px,1.8vw,30px);
  --fs-card-title:24px;
  --fs-card-title-sm:22px;
  --fs-brand:28px;

  /* Body / UI scale */
  --fs-body:15px;
  --fs-sm:13px;
  --fs-xs:12.5px;
  --fs-2xs:11px;
  --fs-label:10px;     /* mono uppercase labels */
  --fs-micro:9px;

  /* Line heights */
  --lh-display:.88;
  --lh-tight:.85;
  --lh-snug:.95;
  --lh-body:1.6;
  --lh-ui:1.5;

  /* Letter spacing */
  --ls-display:-.02em;
  --ls-display-tight:-.025em;
  --ls-label:.18em;
  --ls-label-wide:.22em;
  --ls-nav:.12em;

  /* Label recipe weight */
  --fw-label:900;

  /* ── 3b. SPACING / LAYOUT ───────────────────────────── */
  --pad:clamp(20px,2.4vw,40px);   /* horizontal gutter */
  --space-section:64px;            /* vertical section rhythm */
  --space-card:26px;
  --max:1440px;
  --nav-h:72px;

  /* ── 3c. RADIUS / BORDER ────────────────────────────── */
  --radius-0:0;
  --radius-sm:2px;
  --radius-pill:999px;
  --hairline:1px;
  --border-w-btn:1.5px;
  --strip-w:3px;                  /* accent strips / top borders */

  /* ── 3d. SHADOW ─────────────────────────────────────── */
  --shadow-card-hover:0 8px 32px rgba(var(--ch-black),.12);
  --shadow-exp-hover:0 12px 40px rgba(var(--ch-black),.18);
  --shadow-btn-hover:0 6px 20px rgba(var(--ch-black),.25);
  --shadow-accent-glow:0 6px 24px var(--accent-glow);
  --shadow-hero-text:0 2px 40px rgba(var(--ch-black),.5);
  --glow-cta:0 0 80px var(--accent-glow-soft);

  /* ── 3e. MOTION ─────────────────────────────────────── */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:.15s;
  --dur:.25s;
  --dur-slow:.7s;
  --dur-reveal:.7s;

  /* ── 4. BACK-COMPAT ALIASES (legacy names) ──────────── */
  --dark:var(--c-dark);
  --mid:var(--c-mid);
  --panel:var(--c-panel);
  --paper:var(--c-paper);
  --line:var(--c-line);
  --muted:var(--c-muted);
  --accent:var(--c-accent);
  --orange:var(--c-orange);
  --ink:var(--c-ink);
  --white:var(--c-white);
  --display:var(--font-display);
  --body:var(--font-body);
  --mono:var(--font-mono);
}

/* ============================================================
   THEMES — set <html data-theme="…"> to repaint the site.
   Each block overrides only what changes from the default.
   ============================================================ */

/* PAPER EDITORIAL — light, warm, ink-on-paper. Dark sections
   become paper; accent stays olive. Good for a softer civic feel. */
[data-theme="paper"]{
  --surface-dark:#262320;
  --surface-darker:#1c1a17;
  --surface-mid:var(--c-paper);
  --surface-light:#fffdf9;
  --surface-brand:var(--c-accent);
  --ch-light:245,243,239;        /* "light" channel warms slightly */
  --c-text-light-soft:#4a4640;
  --border-on-light-gap:#e6e1d8;
}

/* MIDNIGHT STEEL — blue-steel dark with a cool cyan accent.
   Same structure, completely different mood. */
[data-theme="midnight"]{
  --c-dark:#10151c;
  --c-dark-deep:#080b10;
  --c-mid:#161d27;
  --c-panel:#1d2530;
  --c-accent:#36c6e0;
  --ch-accent:54,198,224;
  --brand-contrast:#06121a;
  --c-ink:#06121a;
}

/* SAFETY ORANGE — flip primary accent to the secondary orange.
   One-line family swap; everything accent-driven follows. */
[data-theme="orange"]{
  --c-accent:var(--c-orange);
  --ch-accent:var(--ch-orange);
  --brand-contrast:var(--c-white);
}

/* MONO BLUEPRINT — desaturated graphite + white accent, sans the
   olive. Demonstrates a near-neutral identity on the same skeleton. */
[data-theme="blueprint"]{
  --c-dark:#1a1d21;
  --c-dark-deep:#0d0f11;
  --c-mid:#22262b;
  --c-accent:#e8eaed;
  --ch-accent:232,234,237;
  --brand-contrast:#16191d;
  --accent-wash:rgba(232,234,237,.05);
}