/* ============================================================================
   BEACON — three-tier token system
   Tier 1: primitives (raw values, never used directly by components)
   Tier 2: semantic (theme-aware, flip on [data-theme])
   Tier 3: component (consume semantic; track accent rides [data-track])
   Two orthogonal axes: [data-theme] (light/dark) and [data-track] (accent).
   ============================================================================ */

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

  /* Midnight indigo base ramp (NOT black) */
  --c-indigo-1000: #070b1c;
  --c-indigo-950:  #0b1026;
  --c-indigo-900:  #0e1430;
  --c-indigo-850:  #131a3d;
  --c-indigo-800:  #19224d;
  --c-indigo-700:  #222e63;
  --c-indigo-600:  #2e3c80;
  --c-indigo-500:  #3a4ba0;
  --c-indigo-400:  #5566c4;
  --c-indigo-300:  #8a96dd;
  --c-indigo-200:  #b9c1ec;
  --c-indigo-100:  #dde2f7;
  --c-indigo-50:   #eef1fc;
  --c-white:       #f7f9ff;

  /* FOUR live signal channels */
  --c-cyan:    #27e0ff;
  --c-cyan-d:  #0892b3;   /* deepened for light-mode contrast */
  --c-amber:   #ffb02e;
  --c-amber-d: #c97e00;
  --c-magenta: #ff3d8b;
  --c-magenta-d: #c30f5c;
  --c-lime:    #9be312;
  --c-lime-d:  #5f9000;

  /* glows (rgba seeds for box-shadow / text-shadow) */
  --g-cyan:    39, 224, 255;
  --g-amber:   255, 176, 46;
  --g-magenta: 255, 61, 139;
  --g-lime:    155, 227, 18;

  /* status */
  --c-ok:   #9be312;
  --c-warn: #ffb02e;
  --c-crit: #ff3d8b;

  /* ---- TYPE ---- */
  --font-display: "Space Grotesk", "Eurostile", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", "Consolas", "Roboto Mono", ui-monospace, monospace;

  --fs-display:  clamp(2.6rem, 6vw, 5rem);
  --fs-h1:       clamp(2rem, 4.2vw, 3.4rem);
  --fs-h2:       clamp(1.5rem, 2.8vw, 2.25rem);
  --fs-h3:       1.35rem;
  --fs-lg:       1.15rem;
  --fs-body:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-data:     0.8125rem;   /* mono readouts */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --tracking-data: 0.14em;   /* uppercase mono labels */
  --tracking-eyebrow: 0.32em;

  /* ---- SPACING ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- RADIUS ---- */
  --r-0: 0;
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 16px;
  --r-pill: 999px;

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  /* layout */
  --header-h: 64px;
  --maxw: 1180px;
}

/* ============================================================================
   TIER 2: SEMANTIC — DARK (default)
   Stepped colored-dark indigo surfaces (NOT inversion, NOT pure black)
   ============================================================================ */
:root,
[data-theme="dark"] {
  --bg-base:    var(--c-indigo-950);
  --bg-raised:  var(--c-indigo-900);
  --bg-overlay: var(--c-indigo-850);
  --bg-sunken:  var(--c-indigo-1000);
  --bg-inset:   var(--c-indigo-800);

  --border-faint:  rgba(138, 150, 221, 0.16);
  --border:        rgba(138, 150, 221, 0.28);
  --border-strong: rgba(138, 150, 221, 0.48);

  --ink-strong: var(--c-white);
  --ink:        var(--c-indigo-100);
  --ink-soft:   var(--c-indigo-200);
  --ink-mute:   var(--c-indigo-300);
  --ink-faint:  rgba(138, 150, 221, 0.6);
  --ink-on-accent: var(--c-indigo-1000);

  /* channels in dark = bright signal hues */
  --sig-cyan:    var(--c-cyan);
  --sig-amber:   var(--c-amber);
  --sig-magenta: var(--c-magenta);
  --sig-lime:    var(--c-lime);

  --grid-line: rgba(138, 150, 221, 0.10);
  --scrim:     rgba(7, 11, 28, 0.62);

  --elev-1: 0 1px 0 rgba(255,255,255,0.03), 0 6px 18px rgba(0,0,0,0.45);
  --elev-2: 0 1px 0 rgba(255,255,255,0.04), 0 16px 40px rgba(0,0,0,0.55);

  --img-overlay: linear-gradient(180deg, rgba(11,16,38,0.20), rgba(11,16,38,0.42));
  --img-brightness: 1.0;
}

/* ============================================================================
   TIER 2: SEMANTIC — LIGHT  (bright daylight console; deepened signals)
   ============================================================================ */
[data-theme="light"] {
  --bg-base:    var(--c-white);
  --bg-raised:  #ffffff;
  --bg-overlay: var(--c-indigo-50);
  --bg-sunken:  var(--c-indigo-100);
  --bg-inset:   var(--c-indigo-50);

  --border-faint:  rgba(46, 60, 128, 0.14);
  --border:        rgba(46, 60, 128, 0.24);
  --border-strong: rgba(46, 60, 128, 0.42);

  --ink-strong: var(--c-indigo-1000);
  --ink:        var(--c-indigo-900);
  --ink-soft:   var(--c-indigo-700);
  --ink-mute:   var(--c-indigo-500);
  --ink-faint:  rgba(46, 60, 128, 0.55);
  --ink-on-accent: var(--c-white);

  /* channels in light = deepened so they pop on white */
  --sig-cyan:    var(--c-cyan-d);
  --sig-amber:   var(--c-amber-d);
  --sig-magenta: var(--c-magenta-d);
  --sig-lime:    var(--c-lime-d);

  --grid-line: rgba(46, 60, 128, 0.08);
  --scrim:     rgba(20, 26, 61, 0.30);

  --elev-1: 0 1px 2px rgba(20,26,61,0.06), 0 6px 18px rgba(20,26,61,0.08);
  --elev-2: 0 2px 4px rgba(20,26,61,0.08), 0 16px 40px rgba(20,26,61,0.12);

  --img-overlay: linear-gradient(180deg, rgba(247,249,255,0.10), rgba(20,26,61,0.18));
  --img-brightness: 1.0;
}

/* ============================================================================
   TIER 2/3: PER-TRACK ACCENT  (the second color axis)
   --accent = primary signal; --accent-glow = rgb seed for glows.
   Defendo -> cyan, Kickboxing -> amber, Safe Kid -> lime.
   Each defined for BOTH themes (deepened variant in light).
   ============================================================================ */

/* Defendo / Classic Krav Maga -> CYAN (default) */
:root,
[data-track="defendo"] {
  --accent:      var(--sig-cyan);
  --accent-glow: var(--g-cyan);
  --accent-2:    var(--sig-magenta);
  --accent-2-glow: var(--g-magenta);
  --track-name: "Classic Krav Maga · Defendo";
}

/* Ironman Kickboxing -> AMBER */
[data-track="kickboxing"] {
  --accent:      var(--sig-amber);
  --accent-glow: var(--g-amber);
  --accent-2:    var(--sig-cyan);
  --accent-2-glow: var(--g-cyan);
  --track-name: "Ironman Kickboxing";
}

/* Safe Kid -> LIME */
[data-track="safekid"] {
  --accent:      var(--sig-lime);
  --accent-glow: var(--g-lime);
  --accent-2:    var(--sig-cyan);
  --accent-2-glow: var(--g-cyan);
  --track-name: "Safe Kid";
}

/* ---- TIER 3: COMPONENT tokens (consume semantic + accent) ---- */
:root {
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--ink-on-accent);
  --btn-ghost-border: var(--border-strong);
  --card-bg: var(--bg-raised);
  --card-border: var(--border);
  --readout-ink: var(--accent);
  --led-on: var(--accent);
}