/* ============================================================================
   GRID & SUBSTANCE — Token system
   Lane: Swiss Precision / International Typographic Style
   Three tiers: primitive -> semantic -> component
   One mechanism (--accent + accent-derived semantics) serves theme AND track.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TIER 1 — PRIMITIVES (raw values, theme-agnostic)
   --------------------------------------------------------------------------- */
:root {
  /* Neutral ink ramp — near-black through paper. Stepped for dark surfaces. */
  --color-ink-1000: #000000;
  --color-ink-950:  #0a0b0c;
  --color-ink-900:  #111315;
  --color-ink-850:  #181a1d;
  --color-ink-800:  #1f2226;
  --color-ink-750:  #272b30;
  --color-ink-700:  #34393f;
  --color-ink-600:  #4a5158;
  --color-ink-500:  #6b727a;
  --color-ink-400:  #8b9298;
  --color-ink-300:  #aeb3b8;
  --color-ink-200:  #cfd2d5;
  --color-ink-150:  #e2e4e6;
  --color-ink-100:  #edeeef;
  --color-ink-50:   #f5f6f6;
  --color-paper:    #fbfbfa;
  --color-white:    #ffffff;

  /* Functional red — the single disciplined accent (Defendo crimson). */
  --color-red-700: #8f1d18;
  --color-red-600: #b51f17;
  --color-red-500: #d12318;  /* canonical accent */
  --color-red-400: #e4493d;
  --color-red-300: #f07b71;

  /* Per-track accent primitives (re-skin source values). */
  --color-track-krav:  #d12318;  /* control / readiness — crimson */
  --color-track-kick:  #e06d12;  /* kinetic — amber-orange */
  --color-track-grap:  #1f6f8f;  /* technical / ground — steel blue */
  --color-track-kid:   #2f8f5b;  /* warm / safe — green */

  /* Type families — system grotesque stacks evoking Helvetica/Akzidenz. */
  --font-grotesque: "Helvetica Neue", "Helvetica", "Arial", "Inter",
                    system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo",
               "Consolas", monospace;

  /* Modular type scale — strict, ratio 1.25 (major third) off 16px base. */
  --fs-50:  0.640rem;  /* 10.24 — micro caption / index numerals */
  --fs-75:  0.800rem;  /* 12.80 — eyebrow / meta */
  --fs-100: 1.000rem;  /* 16.00 — body */
  --fs-200: 1.250rem;  /* 20.00 — lead */
  --fs-300: 1.563rem;  /* 25.00 — small head */
  --fs-400: 1.953rem;  /* 31.25 — head */
  --fs-500: 2.441rem;  /* 39.06 — section head */
  --fs-600: 3.052rem;  /* 48.83 — display */
  --fs-700: 3.815rem;  /* 61.04 — hero */
  --fs-800: 4.768rem;  /* 76.29 — hero XL */

  /* Line heights — tight for display, comfortable for body. */
  --lh-solid: 1;
  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-body:  1.55;

  /* Tracking — grotesque wants near-zero; only labels open up. */
  --tr-tight:  -0.02em;
  --tr-normal: 0;
  --tr-label:  0.08em;
  --tr-caps:   0.14em;

  /* Weights available across system grotesque stacks. */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  /* Spacing — 8px base grid (the modular grid's unit). */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radius — Swiss is square. Hairline rounding only where functional. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Borders — the grid is drawn with hairlines. */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-heavy: 4px;

  /* Layout grid */
  --grid-cols: 12;
  --grid-gutter: var(--space-5);
  --measure-max: 1280px;
  --measure-text: 64ch;

  /* Motion — mechanical, no bounce. Linear/ease, short. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: linear;
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC (light)  — default
   The reading surface is paper; the grid is drawn in ink.
   --------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — stepped even in light (paper -> raised -> sunken). */
  --bg-canvas:   var(--color-paper);
  --bg-surface:  var(--color-white);
  --bg-raised:   var(--color-white);
  --bg-sunken:   var(--color-ink-50);
  --bg-inverse:  var(--color-ink-950);
  --bg-fill:     var(--color-ink-900);   /* solid blocks (footer/CTA) */

  /* Text */
  --text-primary:   var(--color-ink-900);
  --text-secondary: var(--color-ink-600);
  --text-muted:     var(--color-ink-500);
  --text-faint:     var(--color-ink-400);
  --text-inverse:   var(--color-paper);
  --text-on-accent: var(--color-white);

  /* Lines / grid — the structure is visible. */
  --rule-strong: var(--color-ink-900);
  --rule:        var(--color-ink-200);
  --rule-faint:  var(--color-ink-150);
  --rule-inverse: var(--color-ink-700);

  /* Accent (default = functional red; overridden per track). */
  --accent:        var(--color-red-500);
  --accent-strong: var(--color-red-600);
  --accent-soft:   #fbe7e5;
  --accent-text:   var(--color-red-600);
  --on-accent:     var(--color-white);

  /* Elevation — Swiss barely lifts; shadow is restrained. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(17,19,21,0.06);
  --shadow-2: 0 2px 8px rgba(17,19,21,0.08);
  --shadow-3: 0 8px 28px rgba(17,19,21,0.10);

  /* Image grade — light frames dark-dominant photos in air. */
  --img-grade: grayscale(0.25) contrast(1.06) brightness(1.02);
  --img-overlay: linear-gradient(180deg, rgba(251,251,250,0) 40%, rgba(251,251,250,0.04) 100%);
  --img-frame: var(--color-ink-150);
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC (dark) — stepped near-black surfaces, NOT inversion
   Same grid logic; surfaces layer up from ink-950.
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas:   var(--color-ink-950);
  --bg-surface:  var(--color-ink-900);
  --bg-raised:   var(--color-ink-850);
  --bg-sunken:   var(--color-ink-1000);
  --bg-inverse:  var(--color-paper);
  --bg-fill:     var(--color-ink-1000);

  --text-primary:   var(--color-ink-100);
  --text-secondary: var(--color-ink-300);
  --text-muted:     var(--color-ink-400);
  --text-faint:     var(--color-ink-500);
  --text-inverse:   var(--color-ink-900);
  --text-on-accent: var(--color-white);

  --rule-strong: var(--color-ink-200);
  --rule:        var(--color-ink-750);
  --rule-faint:  var(--color-ink-800);
  --rule-inverse: var(--color-ink-300);

  --accent:        var(--color-red-500);
  --accent-strong: var(--color-red-400);
  --accent-soft:   #2a1513;
  --accent-text:   var(--color-red-400);
  --on-accent:     var(--color-white);

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 2px 10px rgba(0,0,0,0.55);
  --shadow-3: 0 10px 34px rgba(0,0,0,0.6);

  --img-grade: grayscale(0.2) contrast(1.12) brightness(0.92);
  --img-overlay: linear-gradient(180deg, rgba(10,11,12,0) 30%, rgba(10,11,12,0.55) 100%);
  --img-frame: var(--color-ink-750);
}

/* ---------------------------------------------------------------------------
   PER-TRACK ACCENT RE-SKIN — same mechanism as theme.
   Setting data-track (or .accent-*) only swaps the accent semantic group.
   Works under either theme.
   --------------------------------------------------------------------------- */
[data-track="krav-maga"], .accent-krav {
  --accent: var(--color-track-krav);
  --accent-strong: #b51f17;
  --accent-text: var(--color-track-krav);
  --accent-soft: color-mix(in srgb, var(--color-track-krav) 12%, transparent);
}
[data-track="kickboxing"], .accent-kick {
  --accent: var(--color-track-kick);
  --accent-strong: #c25c0d;
  --accent-text: var(--color-track-kick);
  --accent-soft: color-mix(in srgb, var(--color-track-kick) 12%, transparent);
}
[data-track="grappling"], .accent-grap {
  --accent: var(--color-track-grap);
  --accent-strong: #195a73;
  --accent-text: var(--color-track-grap);
  --accent-soft: color-mix(in srgb, var(--color-track-grap) 14%, transparent);
}
[data-track="safe-kid"], .accent-kid {
  --accent: var(--color-track-kid);
  --accent-strong: #277a4c;
  --accent-text: var(--color-track-kid);
  --accent-soft: color-mix(in srgb, var(--color-track-kid) 14%, transparent);
}

/* ---------------------------------------------------------------------------
   TIER 3 — COMPONENT tokens (reference semantic; optional)
   --------------------------------------------------------------------------- */
:root {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-strong);
  --btn-fg: var(--on-accent);
  --btn-radius: var(--radius-1);
  --btn-pad-y: var(--space-3);
  --btn-pad-x: var(--space-5);

  --card-bg: var(--bg-surface);
  --card-border: var(--rule);
  --card-pad: var(--space-6);

  --nav-h: 64px;
  --rule-tick: var(--accent);
}