/* ============================================================================
   KLAXON — three-tier design tokens
   Tier 1: primitives (raw values) — never used directly by components
   Tier 2: semantic (theme-aware: [data-theme] light/dark) + accent (per-track)
   Tier 3: component tokens (built on semantic) — referenced by kit.css
   Two orthogonal axes: [data-theme="light|dark"] and [data-track="defendo|kickboxing|safekid"]
   ============================================================================ */

:root {
  /* ---- TIER 1: PRIMITIVES ------------------------------------------------ */

  /* Charcoal-ink ramp (not pure black; stepped) */
  --ink-900: #0e0f12;
  --ink-850: #131419;
  --ink-800: #16181c;   /* base dark */
  --ink-750: #1c1f25;
  --ink-700: #23262e;
  --ink-650: #2b2f39;
  --ink-600: #353a46;
  --ink-500: #485061;
  --ink-400: #6b7589;
  --ink-300: #95a0b3;
  --ink-200: #c2cad6;
  --ink-100: #e6eaf1;

  /* Blueprint paper ramp (light mode — cool white/blue spec sheet) */
  --paper-000: #f4f7fb;
  --paper-050: #eaf0f7;
  --paper-100: #dde6f1;
  --paper-150: #ccd9e8;
  --paper-200: #b6c6db;
  --paper-300: #8fa3bf;
  --paper-ink: #11202f;   /* deep blueprint ink for text on paper */

  /* HI-VIS coded palette (the brand language) */
  --hv-orange: #ff6a00;   /* signal-orange */
  --hv-orange-soft: #ff8a3d;
  --hv-orange-deep: #c44e00;
  --hv-yellow: #ffd21f;   /* caution-yellow */
  --hv-yellow-soft: #ffe16b;
  --hv-yellow-deep: #c9a200;
  --hv-green: #19c37d;    /* safety-green */
  --hv-green-soft: #4ad99e;
  --hv-green-deep: #0e8c58;
  --hv-cyan: #22a7ff;     /* blueprint-cyan */
  --hv-cyan-soft: #62c3ff;
  --hv-cyan-deep: #1170b8;
  --hv-red: #ff3b3b;      /* fault / stop */

  /* Type primitives */
  --font-grotesque: "Helvetica Neue", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;

  /* Type scale (industrial, tight) */
  --fs-eyebrow: 0.72rem;
  --fs-micro: 0.78rem;
  --fs-body: 1rem;
  --fs-lead: 1.18rem;
  --fs-h4: 1.35rem;
  --fs-h3: 1.85rem;
  --fs-h2: 2.6rem;
  --fs-h1: clamp(2.6rem, 6vw, 4.6rem);
  --fs-display: clamp(3.2rem, 9vw, 6.5rem);

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.55;

  --tracking-wide: 0.18em;
  --tracking-mono: 0.06em;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radius — minimal, doc-chrome (mostly square) */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Border weights — 2px structural */
  --bw-hair: 1px;
  --bw-struct: 2px;
  --bw-heavy: 3px;

  /* Motion */
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 380ms;

  /* Layout */
  --header-h: 64px;
  --maxw: 1200px;
}

/* ============================================================================
   TIER 2a: SEMANTIC TOKENS — theme-aware
   ============================================================================ */

/* DARK (default theme) — stepped colored-dark surfaces, never inversion */
[data-theme="dark"] {
  --surface-base: var(--ink-800);
  --surface-raised: var(--ink-750);
  --surface-overlay: var(--ink-700);
  --surface-sunken: var(--ink-850);
  --surface-inset: var(--ink-650);

  --text-primary: var(--ink-100);
  --text-secondary: var(--ink-300);
  --text-muted: var(--ink-400);
  --text-inverse: var(--ink-900);

  --border-struct: var(--ink-600);
  --border-hair: var(--ink-700);
  --border-strong: var(--ink-500);

  /* Status colors map to hi-vis codes (constant across theme) */
  --status-qualified: var(--hv-green);
  --status-assessment: var(--hv-yellow);
  --status-locked: var(--ink-500);
  --status-locked-tint: var(--hv-cyan);
  --status-fault: var(--hv-red);

  /* Code/cyan info color */
  --info: var(--hv-cyan);
  --info-soft: var(--hv-cyan-soft);

  /* Imagery grade vars (dark handling — keep subject visible) */
  --img-brightness: 0.96;
  --img-contrast: 1.06;
  --img-saturate: 0.78;
  --img-scrim-top: rgba(14,15,18,0.05);
  --img-scrim-bot: rgba(14,15,18,0.42);
  --img-duotone-shadow: rgba(17,32,47,0.55);   /* blueprint-cyan shadow */
  --img-duotone-mix: 0.34;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 8px 28px rgba(0,0,0,0.45);
  --shadow-plate: inset 0 0 0 1px rgba(255,255,255,0.03);

  color-scheme: dark;
}

/* LIGHT — bright blueprint spec sheet, hi-vis codes pop */
[data-theme="light"] {
  --surface-base: var(--paper-000);
  --surface-raised: #ffffff;
  --surface-overlay: var(--paper-050);
  --surface-sunken: var(--paper-100);
  --surface-inset: var(--paper-050);

  --text-primary: var(--paper-ink);
  --text-secondary: #41566c;
  --text-muted: #6b7e94;
  --text-inverse: var(--paper-000);

  --border-struct: var(--paper-200);
  --border-hair: var(--paper-150);
  --border-strong: var(--paper-300);

  --status-qualified: var(--hv-green-deep);
  --status-assessment: var(--hv-yellow-deep);
  --status-locked: var(--paper-300);
  --status-locked-tint: var(--hv-cyan-deep);
  --status-fault: var(--hv-red);

  --info: var(--hv-cyan-deep);
  --info-soft: var(--hv-cyan);

  --img-brightness: 1.02;
  --img-contrast: 1.04;
  --img-saturate: 0.85;
  --img-scrim-top: rgba(244,247,251,0.04);
  --img-scrim-bot: rgba(17,32,47,0.30);
  --img-duotone-shadow: rgba(17,32,47,0.30);
  --img-duotone-mix: 0.22;

  --shadow-1: 0 1px 0 rgba(17,32,47,0.06);
  --shadow-2: 0 10px 30px rgba(17,32,47,0.12);
  --shadow-plate: inset 0 0 0 1px rgba(17,32,47,0.04);

  color-scheme: light;
}

/* ============================================================================
   TIER 2b: ACCENT TOKENS — per-track (second color axis on the hi-vis system)
   Track switch repoints the PRIMARY signal color; status codes stay constant.
   ============================================================================ */

/* Defendo → signal-orange (default) */
[data-track="defendo"] {
  --accent: var(--hv-orange);
  --accent-soft: var(--hv-orange-soft);
  --accent-deep: var(--hv-orange-deep);
  --accent-contrast: #1a0d00;
  --accent-name: "DEFENDO";
}

/* Kickboxing → caution-yellow */
[data-track="kickboxing"] {
  --accent: var(--hv-yellow);
  --accent-soft: var(--hv-yellow-soft);
  --accent-deep: var(--hv-yellow-deep);
  --accent-contrast: #211b00;
  --accent-name: "IRONMAN KICKBOXING";
}

/* Safe Kid → safety-green */
[data-track="safekid"] {
  --accent: var(--hv-green);
  --accent-soft: var(--hv-green-soft);
  --accent-deep: var(--hv-green-deep);
  --accent-contrast: #00190f;
  --accent-name: "SAFE KID";
}

/* In light theme, deepen accent for legibility on paper where needed */
[data-theme="light"][data-track="kickboxing"] {
  --accent-ink: var(--hv-yellow-deep);
}
[data-theme="light"][data-track="defendo"] {
  --accent-ink: var(--hv-orange-deep);
}
[data-theme="light"][data-track="safekid"] {
  --accent-ink: var(--hv-green-deep);
}
[data-theme="dark"] {
  --accent-ink: var(--accent);
}

/* ============================================================================
   TIER 3: COMPONENT TOKENS — built on semantic + accent
   ============================================================================ */
:root {
  /* Topbar */
  --topbar-bg: var(--surface-sunken);
  --topbar-border: var(--border-struct);

  /* Buttons */
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-contrast);
  --btn-ghost-border: var(--border-strong);
  --btn-ghost-fg: var(--text-primary);

  /* Plates / data cards */
  --plate-bg: var(--surface-raised);
  --plate-border: var(--border-struct);
  --plate-label: var(--text-muted);

  /* Bands */
  --band-bg: var(--surface-base);
  --band-bg-alt: var(--surface-raised);
  --band-border: var(--border-struct);

  /* Links / clause numbers */
  --clause-color: var(--info);

  /* Chips / tags */
  --chip-bg: var(--surface-overlay);
  --chip-border: var(--border-struct);
  --chip-fg: var(--text-secondary);
}