/* =====================================================================
   BH5 — Design Tokens
   Two-tier system: PRIMITIVES (raw values) → SEMANTIC (purpose).
   Components consume only semantic tokens. Rebrand = remap one layer.
   ===================================================================== */

:root {
  /* ---------- PRIMITIVES :: color ---------- */
  --paper:        #F5F6F9;   /* off-white, faint cool tint */
  --paper-2:      #ECEEF3;
  --white:        #FFFFFF;
  --ink-900:      #10172A;   /* near-black, blue-cast (matches logo ink) */
  --ink-700:      #262B3A;
  --ink-500:      #585E6E;   /* muted body */
  --ink-300:      #8A8F9C;
  --hairline:     #D8DAE2;
  --hairline-2:   #E5E7EE;

  /* Brand blue — locked. #2d4cf1 is the exact logo accent. */
  --blue-800:     #1A2EAE;   /* action hover (darkest) */
  --blue-700:     #1F3AD0;   /* primary action (white text passes AA ~8:1) */
  --blue-600:     #2D4CF1;   /* brand accent — matches logo exactly */
  --blue-500:     #4E6BFF;   /* highlight / on-dark accent */
  --blue-300:     #93A6FF;   /* on-dark lines/text (bright) */
  --blue-tint:    #EAEEFF;   /* accent surface */

  --graphite-700: #363B45;   /* industrial secondary */
  --graphite-500: #5B616E;

  --amber-500:    #C9821F;   /* "baseline / waste" contrast — use sparingly */

  --ink-dk:       #0C1226;   /* dark anchor background (deep blue-black) */
  --ink-dk-2:     #141B33;   /* dark surface */
  --on-dk:        #E7EAF2;   /* text on dark */
  --on-dk-muted:  #9AA0B5;

  /* ---------- PRIMITIVES :: type ---------- */
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* fluid scale — rem inside clamp() respects user zoom (a11y) */
  --fs-eyebrow: 0.78rem;
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h3:      clamp(1.3rem, 1.12rem + 0.8vw, 1.6rem);
  --fs-h2:      clamp(1.95rem, 1.45rem + 2vw, 2.95rem);
  --fs-h1:      clamp(2.6rem, 1.95rem + 3.2vw, 4.4rem);
  --fs-metric:  clamp(2.6rem, 2rem + 3vw, 4.2rem);

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-body:    1.62;
  --tracking-eyebrow: 0.16em;

  /* ---------- PRIMITIVES :: space (4px base, modular) ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-section: clamp(4rem, 8vw, 7.5rem);

  /* ---------- PRIMITIVES :: radius / shadow / line ---------- */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16,23,42,.05);
  --shadow-2: 0 1px 2px rgba(16,23,42,.05), 0 10px 30px -16px rgba(16,23,42,.18);
  --shadow-dk: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -20px rgba(0,0,0,.55);
  --border-hair: 1px solid var(--hairline);

  --maxw: 1180px;
  --maxw-prose: 64ch;

  /* ---------- SEMANTIC :: surfaces & text ---------- */
  --bg:            var(--paper);
  --bg-surface:    var(--white);
  --bg-sunken:     var(--paper-2);
  --bg-accent:     var(--blue-tint);
  --bg-invert:     var(--ink-dk);
  --bg-invert-2:   var(--ink-dk-2);

  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-300);
  --text-on-invert:var(--on-dk);
  --text-on-invert-muted: var(--on-dk-muted);

  --border:        var(--hairline);
  --border-soft:   var(--hairline-2);

  /* ---------- SEMANTIC :: brand / action ---------- */
  --action:        var(--blue-700);
  --action-hover:  var(--blue-800);
  --on-action:     var(--white);
  --accent:        var(--blue-700);
  --accent-bright: var(--blue-600);
  --accent-on-dk:  var(--blue-300);
  --data:          var(--ink-900);   /* metric numerals */
  --data-pos:      var(--blue-700);  /* verified savings */
  --data-base:     var(--amber-500);  /* baseline / before */

  --focus-ring:    0 0 0 3px rgba(45,76,241,.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}