/* ============================================================================
   THE SAARIO RECORD — token system
   Lane: Institutional / Archival
   Three tiers: PRIMITIVE -> SEMANTIC (light + dark) -> COMPONENT
   Light = cream-and-ink ledger. Dark = stepped oxblood-and-charcoal plate.
   ONE mechanism (--accent + derived) serves both theme and per-track re-skin.
   ============================================================================ */

:root {
  /* ----------------------------------------------------------------------- */
  /* TIER 1 — PRIMITIVES (raw values, theme-agnostic)                        */
  /* ----------------------------------------------------------------------- */

  /* Ink / paper neutrals — warm, archival */
  --ink-950: #0b0a08;
  --ink-900: #16140f;
  --ink-850: #1d1a14;
  --ink-800: #26221a;
  --ink-700: #34302704; /* unused guard */
  --ink-700b: #3a352a;
  --ink-600: #524b3c;
  --ink-500: #6f6856;
  --ink-400: #8c8472;
  --ink-300: #aaa28d;
  --ink-200: #cfc8b6;
  --ink-100: #e6e0d0;

  /* Paper / cream */
  --paper-50: #f7f3e8;
  --paper-100: #f1ecdd;
  --paper-200: #e9e2cf;
  --paper-300: #ded5be;
  --paper-rule: #cbc0a4;

  /* Charcoal plate steps (dark mode surfaces) */
  --char-0: #100e0c;
  --char-1: #18150f;
  --char-2: #211d15;
  --char-3: #2b261c;
  --char-4: #383122;
  --char-line: #4a4230;

  /* Oxblood family — the institutional crimson, restrained */
  --ox-700: #4a1118;
  --ox-600: #6a151d;
  --ox-500: #8c1d24;
  --ox-400: #a8262d;
  --ox-300: #c4434a;
  --ox-200: #d9747a;

  /* Track accent primitives (used by accent re-skin layer) */
  --accent-krav-600: #6a151d;
  --accent-krav-400: #a8262d;
  --accent-krav-200: #d9747a;

  --accent-kick-600: #8a4a0e;
  --accent-kick-400: #c47216;
  --accent-kick-200: #e0a45a;

  --accent-grap-600: #1f4a52;
  --accent-grap-400: #2f7c87;
  --accent-grap-200: #6db3bc;

  --accent-kid-600: #2f5230;
  --accent-kid-400: #4f8a52;
  --accent-kid-200: #8fbf91;

  /* Gold leaf — ceremonial seal hairlines */
  --gold-500: #9a7b2e;
  --gold-400: #b89a48;
  --gold-300: #d4bb74;

  /* Type families — system/web-safe stacks evoking Didone + grotesque */
  --font-display: "Didot", "Bodoni MT", "Bodoni 72", "Hoefler Text",
    "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body: "Helvetica Neue", "Arial Nova", Arial, "Liberation Sans",
    system-ui, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", "Courier New", ui-monospace, monospace;

  /* Type scale — editorial, large display jumps */
  --fs-100: 0.6875rem;  /* 11px micro / ledger labels */
  --fs-200: 0.78125rem; /* 12.5px caption */
  --fs-300: 0.9375rem;  /* 15px small body */
  --fs-400: 1.0625rem;  /* 17px body */
  --fs-500: 1.3125rem;  /* 21px lead */
  --fs-600: 1.75rem;    /* 28px */
  --fs-700: 2.5rem;     /* 40px */
  --fs-800: 3.75rem;    /* 60px */
  --fs-900: 5.5rem;     /* 88px display */
  --fs-1000: 7.5rem;    /* 120px hero */

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-body: 1.62;
  --lh-relaxed: 1.75;

  --ls-display: -0.02em;
  --ls-body: 0.005em;
  --ls-label: 0.22em;  /* ledger / engraved caps tracking */
  --ls-label-wide: 0.34em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Spacing — 4px base, ledger rhythm */
  --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-10: 8rem;
  --space-11: 11rem;

  /* Radius — institutional = sharp; almost no rounding */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 3px;
  --radius-pill: 999px;

  /* Hairline / rule weights */
  --rule-hair: 1px;
  --rule-med: 2px;
  --rule-heavy: 4px;

  /* Motion — measured, archival, never bouncy */
  --ease-plate: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-rule: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 460ms;

  /* Container */
  --measure: 68ch;
  --maxw: 1180px;
  --maxw-wide: 1320px;
}

/* ========================================================================= */
/* TIER 2 — SEMANTIC (LIGHT) : cream-and-ink ledger                          */
/* ========================================================================= */
[data-theme="light"] {
  color-scheme: light;

  --bg-page: var(--paper-100);
  --bg-surface: var(--paper-50);
  --bg-surface-2: #fffdf6;
  --bg-surface-3: var(--paper-200);
  --bg-inverse: var(--ink-900);
  --bg-plate: var(--ink-900);          /* engraved dark plate inside light */
  --bg-sunken: var(--paper-300);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-on-accent: var(--paper-50);
  --text-on-inverse: var(--paper-100);
  --text-inverse-secondary: var(--ink-200);

  --rule: var(--paper-rule);
  --rule-strong: var(--ink-700b);
  --rule-on-inverse: var(--ink-700b);

  --accent: var(--ox-600);
  --accent-strong: var(--ox-700);
  --accent-bright: var(--ox-400);
  --accent-soft: var(--ox-200);
  --accent-wash: rgba(106, 21, 29, 0.07);
  --accent-text: var(--ox-600);

  --seal-line: var(--gold-500);
  --seal-fill: var(--paper-200);

  --img-grade: grayscale(0.55) contrast(1.08) brightness(1.02) sepia(0.12);
  --img-overlay: linear-gradient(
      180deg,
      rgba(247, 243, 232, 0) 38%,
      rgba(247, 243, 232, 0.18) 100%
    );
  --img-plate-bg: var(--ink-900);

  --shadow-1: 0 1px 0 var(--rule), 0 1px 2px rgba(22, 20, 15, 0.06);
  --shadow-2: 0 1px 0 var(--rule), 0 4px 14px rgba(22, 20, 15, 0.08);
  --shadow-plate: 0 0 0 1px var(--rule-strong), 0 18px 40px rgba(22, 20, 15, 0.18);

  --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent-bright);
}

/* ========================================================================= */
/* TIER 2 — SEMANTIC (DARK) : stepped oxblood-and-charcoal plate             */
/* Stepped surfaces (char-0..char-4), NOT an inversion of light.             */
/* ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: var(--char-0);
  --bg-surface: var(--char-1);
  --bg-surface-2: var(--char-2);
  --bg-surface-3: var(--char-3);
  --bg-inverse: var(--paper-100);
  --bg-plate: var(--char-2);
  --bg-sunken: var(--char-0);

  --text-primary: var(--paper-100);
  --text-secondary: var(--ink-200);
  --text-muted: var(--ink-300);
  --text-faint: var(--ink-400);
  --text-on-accent: var(--paper-50);
  --text-on-inverse: var(--ink-900);
  --text-inverse-secondary: var(--ink-600);

  --rule: var(--char-line);
  --rule-strong: var(--ink-500);
  --rule-on-inverse: var(--paper-rule);

  --accent: var(--ox-400);
  --accent-strong: var(--ox-300);
  --accent-bright: var(--ox-300);
  --accent-soft: var(--ox-600);
  --accent-wash: rgba(168, 38, 45, 0.14);
  --accent-text: var(--ox-300);

  --seal-line: var(--gold-400);
  --seal-fill: var(--char-3);

  --img-grade: grayscale(0.5) contrast(1.14) brightness(0.82) sepia(0.06);
  --img-overlay: linear-gradient(
      180deg,
      rgba(16, 14, 12, 0.1) 30%,
      rgba(16, 14, 12, 0.82) 100%
    );
  --img-plate-bg: var(--char-0);

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-plate: 0 0 0 1px var(--rule), 0 20px 48px rgba(0, 0, 0, 0.7);

  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent-bright);
}

/* ========================================================================= */
/* ACCENT RE-SKIN — one mechanism, per-track.                                */
/* data-track sets --accent + derived. Works in BOTH themes because the      */
/* track primitives are theme-agnostic; we pick the 600/400 step per theme.  */
/* ========================================================================= */
[data-theme="light"][data-track="krav-maga"],
[data-theme="light"] [data-track="krav-maga"] {
  --accent: var(--accent-krav-600); --accent-bright: var(--accent-krav-400);
  --accent-soft: var(--accent-krav-200); --accent-text: var(--accent-krav-600);
  --accent-wash: rgba(106, 21, 29, 0.07);
}
[data-theme="dark"][data-track="krav-maga"],
[data-theme="dark"] [data-track="krav-maga"] {
  --accent: var(--accent-krav-400); --accent-bright: var(--accent-krav-200);
  --accent-soft: var(--accent-krav-600); --accent-text: var(--accent-krav-200);
  --accent-wash: rgba(168, 38, 45, 0.14);
}

[data-theme="light"][data-track="kickboxing"],
[data-theme="light"] [data-track="kickboxing"] {
  --accent: var(--accent-kick-600); --accent-bright: var(--accent-kick-400);
  --accent-soft: var(--accent-kick-200); --accent-text: var(--accent-kick-600);
  --accent-wash: rgba(138, 74, 14, 0.08);
}
[data-theme="dark"][data-track="kickboxing"],
[data-theme="dark"] [data-track="kickboxing"] {
  --accent: var(--accent-kick-400); --accent-bright: var(--accent-kick-200);
  --accent-soft: var(--accent-kick-600); --accent-text: var(--accent-kick-200);
  --accent-wash: rgba(196, 114, 22, 0.15);
}

[data-theme="light"][data-track="grappling"],
[data-theme="light"] [data-track="grappling"] {
  --accent: var(--accent-grap-600); --accent-bright: var(--accent-grap-400);
  --accent-soft: var(--accent-grap-200); --accent-text: var(--accent-grap-600);
  --accent-wash: rgba(31, 74, 82, 0.08);
}
[data-theme="dark"][data-track="grappling"],
[data-theme="dark"] [data-track="grappling"] {
  --accent: var(--accent-grap-400); --accent-bright: var(--accent-grap-200);
  --accent-soft: var(--accent-grap-600); --accent-text: var(--accent-grap-200);
  --accent-wash: rgba(47, 124, 135, 0.16);
}

[data-theme="light"][data-track="safe-kid"],
[data-theme="light"] [data-track="safe-kid"] {
  --accent: var(--accent-kid-600); --accent-bright: var(--accent-kid-400);
  --accent-soft: var(--accent-kid-200); --accent-text: var(--accent-kid-600);
  --accent-wash: rgba(47, 82, 48, 0.08);
}
[data-theme="dark"][data-track="safe-kid"],
[data-theme="dark"] [data-track="safe-kid"] {
  --accent: var(--accent-kid-400); --accent-bright: var(--accent-kid-200);
  --accent-soft: var(--accent-kid-600); --accent-text: var(--accent-kid-200);
  --accent-wash: rgba(79, 138, 82, 0.16);
}

/* ========================================================================= */
/* TIER 3 — COMPONENT TOKENS (built only on semantics)                       */
/* ========================================================================= */
:root {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-strong);
  --btn-fg: var(--text-on-accent);
  --btn-border: var(--accent);

  --btn-ghost-fg: var(--text-primary);
  --btn-ghost-border: var(--rule-strong);
  --btn-ghost-hover-bg: var(--accent-wash);

  --card-bg: var(--bg-surface);
  --card-border: var(--rule);
  --card-shadow: var(--shadow-2);

  --eyebrow-fg: var(--accent-text);
  --eyebrow-rule: var(--accent);

  --tag-bg: var(--bg-surface-3);
  --tag-fg: var(--text-secondary);
  --tag-border: var(--rule);

  --field-ledger: var(--rule);
  --field-ledger-label: var(--text-muted);
}