/* =============================================================================
   DATUM — Token system
   Three tiers: primitive → semantic → component.
   Two orthogonal axes ride ONE mechanism:
     [data-theme="dark"|"light"]  — base/surface/text/border step swaps
     [data-track="defendo"|"kickboxing"|"safekid"] — signal accent swap
   Every component inherits both swaps for free via semantic vars.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   TIER 1 — PRIMITIVES (raw, locked values from the Datum direction card)
   ------------------------------------------------------------------------- */
:root {
  /* Dark-base primitives (locked) */
  --p-ink-900: #080a0d;   /* backdrop */
  --p-ink-850: #0e1116;   /* dark base */
  --p-ink-800: #151921;   /* +step */
  --p-ink-750: #1b2026;   /* raised */
  --p-ink-700: #232a32;   /* overlay (~6% further step) */
  --p-ink-650: #2c343d;

  /* Light-base primitives (ink on technical paper) */
  --p-paper-050: #eef0f3; /* light bg */
  --p-paper-000: #ffffff; /* white surface */
  --p-paper-100: #e4e7ec; /* raised paper */
  --p-paper-150: #d9dde3; /* overlay paper */
  --p-paper-200: #ced3da;

  /* Text primitives */
  --p-text-100: #eef2f6;  /* light text (on dark) */
  --p-text-300: #a7b1bd;  /* muted text */
  --p-text-900: #0c1015;  /* near-black (on light) */
  --p-text-700: #4a545f;  /* muted near-black */

  /* Hairline primitives */
  --p-line-dark: rgba(255, 255, 255, 0.09);
  --p-line-dark-strong: rgba(255, 255, 255, 0.16);
  --p-line-light: rgba(12, 16, 21, 0.12);
  --p-line-light-strong: rgba(12, 16, 21, 0.22);

  /* Signal / track accents (locked) */
  --p-signal-defendo: #e23a2e;     /* signal red */
  --p-signal-defendo-dim: #b22b21;
  --p-signal-kickboxing: #f5871f;  /* amber */
  --p-signal-kickboxing-dim: #c96a12;
  --p-signal-safekid: #16a98c;     /* teal */
  --p-signal-safekid-dim: #0f8270;

  /* Belt / level scale (locked) */
  --p-belt-bone: #d8dde3;
  --p-belt-steel: #8a949f;
  --p-belt-bronze: #b07b3e;
  --p-belt-crimson: #c42c22;
  --p-belt-graphite: #3a424b;

  /* Status primitives */
  --p-status-confirmed: #4ec07a;
  --p-status-locked: #5b646e;

  /* Radii — crisp 2–4px */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

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

  /* Type stacks — system/web-safe stacks that EVOKE Space Grotesk + IBM Plex Mono */
  --font-display: "Space Grotesk", "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "SF Mono", "JetBrains Mono", "Consolas", "Roboto Mono", ui-monospace, monospace;

  /* Type scale */
  --fs-mono-xs: 11px;
  --fs-mono-sm: 12px;
  --fs-mono-md: 13px;
  --fs-body: 16px;
  --fs-lead: 19px;
  --fs-h4: 21px;
  --fs-h3: 28px;
  --fs-h2: 40px;
  --fs-h1: 60px;
  --fs-display: 88px;

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  --track-mono: 0.18em;     /* mono label tracking */
  --track-mono-tight: 0.1em;
  --track-display: -0.02em;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 420ms;

  /* Layout */
  --maxw: 1200px;
  --maxw-text: 720px;
  --grid-cell: 88px; /* structural grid pitch */
  --header-h: 56px;  /* sticky .topbar effective height: space-3*2 (24) + ~26px content + 1px border */
}

/* ----------------------------------------------------------------------------
   TIER 2 — SEMANTIC (theme axis). Default = DARK (per card).
   ------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg-backdrop: var(--p-ink-900);
  --surface-base: var(--p-ink-850);
  --surface-raised: var(--p-ink-750);
  --surface-overlay: var(--p-ink-700);
  --surface-sunken: var(--p-ink-800);
  --surface-inset: var(--p-ink-650);

  --text-primary: var(--p-text-100);
  --text-muted: var(--p-text-300);
  --text-inverse: var(--p-text-900);

  --border-hairline: var(--p-line-dark);
  --border-strong: var(--p-line-dark-strong);

  /* Faint structural grid line color */
  --grid-line: rgba(255, 255, 255, 0.038);
  --grid-line-strong: rgba(255, 255, 255, 0.07);

  /* On-accent text */
  --text-on-accent: #ffffff;

  /* LED + gauge track baselines */
  --gauge-track: rgba(255, 255, 255, 0.1);
  --led-locked: var(--p-status-locked);
  --led-confirmed: var(--p-status-confirmed);

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                  0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --scanline: rgba(255, 255, 255, 0.022);
}

[data-theme="light"] {
  color-scheme: light;

  --bg-backdrop: var(--p-paper-050);
  --surface-base: var(--p-paper-000);
  --surface-raised: var(--p-paper-000);
  --surface-overlay: var(--p-paper-100);
  --surface-sunken: var(--p-paper-100);
  --surface-inset: var(--p-paper-150);

  --text-primary: var(--p-text-900);
  --text-muted: var(--p-text-700);
  --text-inverse: var(--p-text-100);

  --border-hairline: var(--p-line-light);
  --border-strong: var(--p-line-light-strong);

  --grid-line: rgba(12, 16, 21, 0.05);
  --grid-line-strong: rgba(12, 16, 21, 0.09);

  --text-on-accent: #ffffff;

  --gauge-track: rgba(12, 16, 21, 0.1);
  --led-locked: #b3bac1;
  --led-confirmed: #2f9c5c;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                  0 16px 34px -26px rgba(12, 16, 21, 0.4);
  --scanline: rgba(12, 16, 21, 0.018);
}

/* ----------------------------------------------------------------------------
   TIER 2 — SEMANTIC (track axis). Default = Defendo (signal red).
   Sets the single --signal var that every component pulls from.
   ------------------------------------------------------------------------- */
:root,
[data-track="defendo"] {
  --signal: var(--p-signal-defendo);
  --signal-dim: var(--p-signal-defendo-dim);
  --signal-soft: rgba(226, 58, 46, 0.14);
  --signal-line: rgba(226, 58, 46, 0.4);
  --track-name: "CLASSIC KRAV MAGA · DEFENDO";
}

[data-track="kickboxing"] {
  --signal: var(--p-signal-kickboxing);
  --signal-dim: var(--p-signal-kickboxing-dim);
  --signal-soft: rgba(245, 135, 31, 0.15);
  --signal-line: rgba(245, 135, 31, 0.42);
  --track-name: "IRONMAN KICKBOXING";
}

[data-track="safekid"] {
  --signal: var(--p-signal-safekid);
  --signal-dim: var(--p-signal-safekid-dim);
  --signal-soft: rgba(22, 169, 140, 0.15);
  --signal-line: rgba(22, 169, 140, 0.42);
  --track-name: "SAFE KID";
}

/* ----------------------------------------------------------------------------
   TIER 3 — COMPONENT (named per component, value derived from semantic)
   ------------------------------------------------------------------------- */
:root {
  /* Top bar */
  --topbar-bg: color-mix(in srgb, var(--surface-base) 86%, transparent);
  --topbar-border: var(--border-hairline);

  /* Panel / console card */
  --panel-bg: var(--surface-raised);
  --panel-border: var(--border-hairline);
  --panel-radius: var(--radius-md);

  /* Buttons */
  --btn-primary-bg: var(--signal);
  --btn-primary-text: var(--text-on-accent);
  --btn-primary-bg-hover: var(--signal-dim);
  /* ghost border: visibly stronger than a hairline so the outline reads
     clearly against dark surfaces (AA-ish), without becoming a solid box */
  --btn-ghost-border: color-mix(in srgb, var(--text-primary) 38%, transparent);
  --btn-ghost-text: var(--text-primary);

  /* Eyebrow / mono label */
  --eyebrow-color: var(--text-muted);
  --eyebrow-tick: var(--signal);

  /* Progression module */
  --module-bg: var(--surface-raised);
  --module-bg-active: var(--surface-overlay);
  --module-border: var(--border-hairline);
  --module-border-active: var(--signal-line);
  --gauge-fill: var(--signal);

  /* Track card / image grade accent */
  --grade-accent: var(--signal);

  /* Tags / chips */
  --tag-bg: var(--surface-overlay);
  --tag-text: var(--text-muted);
  --tag-border: var(--border-hairline);

  /* Stat strip */
  --stat-value: var(--text-primary);
  --stat-label: var(--text-muted);
}