/* ============================================================================
   SINGLE LIGHT — token system
   Three tiers: primitive -> semantic -> component.
   Cinematic minimal: near-monochrome stepped surfaces, ONE red per view.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TIER 1 — PRIMITIVES (raw values, theme-agnostic)
   --------------------------------------------------------------------------- */
:root {
  /* Ink ramp — cool near-black to white. The whole palette is grayscale;
     color lives only in the single accent. */
  --color-ink-1000: #000000;
  --color-ink-950:  #07080a;
  --color-ink-925:  #0c0e11;
  --color-ink-900:  #121417;
  --color-ink-850:  #181b1f;
  --color-ink-800:  #1f2329;
  --color-ink-700:  #2b3037;
  --color-ink-600:  #3b424b;
  --color-ink-500:  #565e69;
  --color-ink-400:  #7b828c;
  --color-ink-300:  #a3a9b1;
  --color-ink-200:  #c8ccd1;
  --color-ink-150:  #dde0e3;
  --color-ink-100:  #ebedef;
  --color-ink-050:  #f4f5f6;
  --color-ink-025:  #fafafb;
  --color-ink-000:  #ffffff;

  /* The single accent — Defendo crimson. Used exactly once per view. */
  --color-red-700:  #8c0f15;
  --color-red-600:  #b3151c;
  --color-red-500:  #d4232b;
  --color-red-400:  #e3454c;
  --color-red-300:  #ef7077;

  /* Per-track accent primitives (one mechanism, swappable accent) */
  --color-track-kravmaga:   #d4232b; /* crimson — real-world readiness */
  --color-track-kickboxing: #c9742a; /* ember — stand-up energy */
  --color-track-grappling:  #3f7fb0; /* steel — technical ground */
  --color-track-safekid:    #4a9d6e; /* sage — the warmer one */

  /* Type — system stacks evoking a tight grotesque + a sober serif for lineage */
  --font-display: "Helvetica Neue", "Arial Narrow", Arial, system-ui, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif;
  --font-mono: "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Type scale — large, confident, lots of air */
  --fs-eyebrow: 0.72rem;
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.875rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.5rem;
  --fs-4xl:  4.75rem;
  --fs-5xl:  6.5rem;

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-base:  1.6;

  --ls-mega: -0.03em;
  --ls-tight: -0.015em;
  --ls-eyebrow: 0.32em;
  --ls-wide: 0.14em;

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

  /* Spacing — generous; negative space is the brand */
  --space-0:  0;
  --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;
  --space-11: 176px;
  --space-12: 240px;

  /* Radius — near-zero. Sharp, architectural. */
  --radius-0: 0;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-pill: 999px;

  /* Borders */
  --border-hair: 1px;

  /* Motion — slow and quiet */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 340ms;
  --dur-slow: 640ms;
  --dur-cinematic: 1100ms;

  /* Container */
  --maxw: 1240px;
  --maxw-prose: 60ch;

  /* Image grade (cinematic single-light treatment, applied in kit) */
  --grade-contrast: 1.12;
  --grade-saturate: 0.55;
  --grade-brightness: 0.92;
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC (theme-dependent). Default = DARK (cinematic dominant).
   Dark uses STEPPED surfaces, not inversion.
   --------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Stepped surfaces — each level a touch lighter, layered elevation */
  --bg-base:      var(--color-ink-1000);
  --bg-surface:   var(--color-ink-950);
  --bg-surface-2: var(--color-ink-900);
  --bg-surface-3: var(--color-ink-850);
  --bg-raised:    var(--color-ink-800);
  --bg-inset:     var(--color-ink-925);

  --text-primary:   var(--color-ink-050);
  --text-secondary: var(--color-ink-300);
  --text-muted:     var(--color-ink-500);
  --text-inverse:   var(--color-ink-1000);
  --text-on-accent: var(--color-ink-000);

  --border-subtle: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.16);
  --border-hairline: rgba(255,255,255,0.10);

  /* The single accent rides one token; per-track overrides --accent */
  --accent:        var(--color-red-500);
  --accent-strong: var(--color-red-600);
  --accent-soft:   rgba(212, 35, 43, 0.14);
  --accent-line:   rgba(212, 35, 43, 0.45);
  --on-accent:     var(--color-ink-000);

  /* Image grade overlay tint for dark */
  --img-overlay: linear-gradient(180deg, rgba(7,8,10,0.10) 0%, rgba(7,8,10,0.78) 100%);
  --img-overlay-side: linear-gradient(90deg, rgba(7,8,10,0.92) 0%, rgba(7,8,10,0.55) 45%, rgba(7,8,10,0.05) 100%);

  /* Elevation — barely-there in dark, just a hair of lift + hairline */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.5);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}

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

  /* Light = images framed in generous white space; surfaces step DOWN in tone */
  --bg-base:      var(--color-ink-000);
  --bg-surface:   var(--color-ink-025);
  --bg-surface-2: var(--color-ink-050);
  --bg-surface-3: var(--color-ink-100);
  --bg-raised:    var(--color-ink-000);
  --bg-inset:     var(--color-ink-050);

  --text-primary:   var(--color-ink-950);
  --text-secondary: var(--color-ink-600);
  --text-muted:     var(--color-ink-400);
  --text-inverse:   var(--color-ink-000);
  --text-on-accent: var(--color-ink-000);

  --border-subtle: rgba(7,8,10,0.08);
  --border-strong: rgba(7,8,10,0.20);
  --border-hairline: rgba(7,8,10,0.12);

  --accent:        var(--color-red-600);
  --accent-strong: var(--color-red-700);
  --accent-soft:   rgba(179, 21, 28, 0.08);
  --accent-line:   rgba(179, 21, 28, 0.40);
  --on-accent:     var(--color-ink-000);

  --img-overlay: linear-gradient(180deg, rgba(7,8,10,0.05) 0%, rgba(7,8,10,0.55) 100%);
  --img-overlay-side: linear-gradient(90deg, rgba(7,8,10,0.85) 0%, rgba(7,8,10,0.40) 45%, rgba(7,8,10,0.00) 100%);

  --shadow-1: 0 1px 2px rgba(7,8,10,0.06), 0 10px 30px rgba(7,8,10,0.07);
  --shadow-2: 0 2px 4px rgba(7,8,10,0.08), 0 24px 60px rgba(7,8,10,0.12);
  --shadow-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}

/* ---------------------------------------------------------------------------
   PER-TRACK ACCENT — one mechanism: data-track overrides --accent chain.
   Works in either theme.
   --------------------------------------------------------------------------- */
[data-track="krav-maga"] {
  --accent: var(--color-track-kravmaga);
  --accent-strong: #b3151c;
  --accent-soft: rgba(212,35,43,0.14);
  --accent-line: rgba(212,35,43,0.45);
}
[data-track="kickboxing"] {
  --accent: var(--color-track-kickboxing);
  --accent-strong: #a85d1c;
  --accent-soft: rgba(201,116,42,0.16);
  --accent-line: rgba(201,116,42,0.45);
}
[data-track="grappling"] {
  --accent: var(--color-track-grappling);
  --accent-strong: #2d6593;
  --accent-soft: rgba(63,127,176,0.16);
  --accent-line: rgba(63,127,176,0.45);
}
[data-track="safe-kid"] {
  --accent: var(--color-track-safekid);
  --accent-strong: #3a805a;
  --accent-soft: rgba(74,157,110,0.16);
  --accent-line: rgba(74,157,110,0.45);
}

/* ---------------------------------------------------------------------------
   TIER 3 — COMPONENT tokens (reference semantic)
   --------------------------------------------------------------------------- */
:root {
  --btn-radius: var(--radius-0);
  --btn-pad-y: 14px;
  --btn-pad-x: 28px;
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--on-accent);
  --btn-ghost-border: var(--border-strong);

  --card-bg: var(--bg-surface-2);
  --card-border: var(--border-subtle);
  --card-radius: var(--radius-0);

  --nav-h: 72px;
  --rule: var(--border-hair) solid var(--border-subtle);
}