/**
 * TOKENS — Live Wire design system
 * Single source of truth for color, type, spacing, motion and shadow
 * primitives. Mirrors src/lib/tokens.mjs (contrast pairs verified there
 * and printed by build.mjs / enforced by verify.mjs).
 */

:root {
  /* ---- Palette (exact spec tokens) -------------------------------- */
  --void: #0C0D0F;
  --void-2: #16181C;
  --void-3: #22262C;
  --concrete: #E8E6E1;
  --concrete-2: #D3D0C9;
  --steel: #8A8F96;
  --volt: #F5C518;
  --volt-deep: #D9AC08;
  --alert: #E0402B;
  --live: #38C172;
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Derived, accessibility-only text variants -------------------
     Fills / borders / icons always use --alert. Small alert-colored TEXT
     uses one of these two so it clears 4.5:1 on every surface it lands
     on (raw --alert measures 4.18:1 on --void-2 and 3.41:1 on --concrete
     — both fail AA at body sizes). See src/lib/tokens.mjs for the numbers. */
  --alert-on-dark: #FF6A54;
  --alert-on-light: #B4291A;

  /* ---- Semantic surfaces -------------------------------------------- */
  --bg: var(--void);
  --bg-raised: var(--void-2);
  --border-dark: var(--void-3);
  --text-on-dark: rgb(232 230 225 / 0.92); /* concrete @ ~92%, never pure white */
  --text-on-dark-muted: var(--steel);
  --text-on-light: var(--void-2);
  --text-on-light-muted: #5B5F66;

  /* ---- Type families --------------------------------------------------
     Fallback faces carry size-adjust / ascent-override / descent-override
     tuned from the real webfont metrics (see build.mjs console output)
     so swapping in the real face doesn't reflow the page. */
  --font-display: "Haywire Condensed", "Haywire Condensed Fallback", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Impact, sans-serif;
  --font-body: "Haywire Sans", "Haywire Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Haywire Mono", "Haywire Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Fluid type scale ---------------------------------------------- */
  --size-h1: clamp(3rem, 1.6rem + 6.5vw, 8rem);
  --size-h2: clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem);
  --size-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --size-h4: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --size-lede: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --size-body: 1.0625rem;
  --size-small: 0.875rem;
  --size-label: 0.7rem;
  --size-stat: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);

  /* ---- Spacing scale (8px base) --------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 78rem;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);
  --radius: 0;
  --radius-pill: 999px;
  --border-w: 1px;
  --grid-line: var(--void-3);

  /* ---- Shadows (hard-offset, no blur) ----------------------------------- */
  --shadow-slab: 4px 4px 0 var(--void-3);
  --shadow-slab-light: 4px 4px 0 var(--void);
  --shadow-slab-press: 0 0 0 var(--void-3);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-mech: cubic-bezier(.2,.9,.3,1);
  --dur-reveal: 320ms;
  --dur-wipe: 420ms;
  --dur-snap: 90ms;
  --stagger: 45ms;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-skiplink: 300;

  color-scheme: dark;
}

/* Excavation sub-brand shift: same black/yellow bones and the same
   --volt CTAs everywhere (conversion color never changes division to
   division) — but a heavier earth-orange enters as the DECORATIVE /
   label accent (eyebrows, corner marks, stripe variant, icon fills) on
   dark surfaces only. Verified: #E0862B on --void = 7.05:1, on --void-2
   = 6.44:1 (both clear AA). It is NOT verified for text on --concrete
   (3.35:1 even for the darker shade) so on light bands excavation
   eyebrows fall back to --void text like the rest of the site — see
   components.css .eyebrow--on-light. Scoped to data-division="excavation". */
[data-division="excavation"] {
  --division-accent: #E0862B;
  --division-accent-deep: #B8680F;
}
:root, [data-division="electrical"] {
  --division-accent: var(--volt);
  --division-accent-deep: var(--volt-deep);
}