/* ============================================================================
   APEX — Token system (three tiers: primitive → semantic → component)
   The Arena. UFC / gladiatorial presence. Capability under pressure.

   Two orthogonal axes ride ONE mechanism:
     [data-theme="dark"|"light"]   — luminance, NOT inversion
     [data-track="defendo"|"kick"|"safekid"] — charged accent hue swap
   Every component reads semantic/component tokens only; never primitives.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TIER 1 — PRIMITIVES (locked from the Apex card; never themed)
   --------------------------------------------------------------------------- */
:root {
  /* Stage neutrals (near-black scale + gallery whites) */
  --p-ink-900: #050506;   /* deepest bg */
  --p-ink-850: #0a0a0c;   /* near-black stage */
  --p-ink-800: #141518;   /* raised */
  --p-ink-750: #1c1d22;   /* overlay step */
  --p-ink-700: #26282e;   /* hairline-on-dark */
  --p-steel-500: #5b606b;
  --p-steel-400: #8a949f; /* ascent: steel */
  --p-mist-300: #a6a8ae;  /* muted text dark */
  --p-mist-200: #cfd2d6;  /* ascent: chalk */
  --p-paper-100: #f6f6f7; /* text dark / bg light */
  --p-paper-050: #ffffff;

  /* Gallery (light) neutrals */
  --p-gallery-050: #ffffff;
  --p-gallery-100: #f4f4f5;
  --p-gallery-150: #ececee;
  --p-gallery-200: #dcdde0;
  --p-gallery-300: #c4c6cb;
  --p-gallery-600: #4a4d55;
  --p-gallery-800: #1a1b1f;
  --p-gallery-900: #0a0a0c;

  /* Charged signal hues (per-track accents) */
  --p-red-500: #ec1f17;   /* Defendo / blood-red (default) */
  --p-red-600: #c4150e;
  --p-red-300: #ff5a52;
  --p-amber-500: #ff7a00; /* Kickboxing */
  --p-amber-600: #d96400;
  --p-amber-300: #ffa14d;
  --p-jade-500: #12b886;  /* Safe Kid */
  --p-jade-600: #0c8e67;
  --p-jade-300: #4fd1aa;

  /* Ascent ladder primitives (chalk → champion gold) */
  --p-rung-chalk: #cfd2d6;
  --p-rung-steel: #8a949f;
  --p-rung-bronze: #c98a3a;
  --p-rung-red: #ec1f17;
  --p-rung-gold: #e7c45a;

  /* Geometry / motion (theme-invariant) */
  --radius-0: 0px;
  --radius-1: 2px;       /* sharp corners — Apex stays angular */
  --radius-pill: 999px;
  --border-w: 2px;
  --border-hair: 1px;
  --skew: -7deg;         /* the signature diagonal cut */

  --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;

  --maxw: 1240px;
  --maxw-narrow: 760px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* Type stacks — system/web-safe approximations (NO remote fonts) */
  /* Display: evoke Saira Condensed — narrow, condensed grotesque */
  --font-display: "Saira Condensed", "Oswald", "Archivo Narrow",
                  "Roboto Condensed", "Helvetica Neue Condensed", "Impact",
                  system-ui, sans-serif;
  /* Body/UI: evoke Archivo — clean grotesque */
  --font-body: "Archivo", "Inter", "Helvetica Neue", "Segoe UI", Roboto,
               system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", "SFMono-Regular", ui-monospace, Menlo,
               Consolas, monospace;

  /* Type scale (display runs huge) */
  --fs-mega: clamp(3.6rem, 9vw, 8.5rem);
  --fs-h1: clamp(2.8rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-h4: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-md: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-body: 1.6;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.22em;
}

/* ---------------------------------------------------------------------------
   TIER 2 — SEMANTIC (theme axis: dark default + light gallery)
   Stepped luminance surfaces — dark is deliberate, not an inversion.
   --------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--p-ink-900);
  --surface-base: var(--p-ink-850);
  --surface-raised: var(--p-ink-800);
  --surface-overlay: var(--p-ink-750);
  --surface-sunken: var(--p-ink-900);

  --text: var(--p-paper-100);
  --text-muted: var(--p-mist-300);
  --text-faint: var(--p-steel-500);
  --text-on-accent: var(--p-paper-050);

  --border: var(--p-ink-700);
  --border-strong: var(--p-steel-500);
  --hairline: rgba(246, 246, 247, 0.10);

  --scrim-top: rgba(5, 5, 6, 0.10);
  --scrim-bottom: rgba(5, 5, 6, 0.92);
  --scrim-side: rgba(5, 5, 6, 0.78);

  --elev-1: 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.5);
  --elev-2: 0 2px 0 rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.6);

  /* Image treatment vars (dark): crush to near-black, lift accent */
  --img-bg: var(--p-ink-900);
  --img-filter: grayscale(0.35) contrast(1.18) brightness(0.82);
  --img-blend: luminosity;
  --img-accent-opacity: 0.30;
  --img-scrim: linear-gradient(180deg,
                rgba(5,5,6,0.15) 0%, rgba(5,5,6,0.05) 40%,
                rgba(5,5,6,0.55) 78%, rgba(5,5,6,0.95) 100%);
}

[data-theme="light"] {
  color-scheme: light;
  /* High-contrast white "gallery" — stepped, not inverted */
  --bg: var(--p-gallery-100);
  --surface-base: var(--p-gallery-050);
  --surface-raised: var(--p-gallery-050);
  --surface-overlay: var(--p-gallery-150);
  --surface-sunken: var(--p-gallery-150);

  --text: var(--p-gallery-900);
  --text-muted: var(--p-gallery-600);
  --text-faint: var(--p-gallery-300);
  --text-on-accent: var(--p-paper-050);

  --border: var(--p-gallery-900);        /* hard black 2px borders = gallery */
  --border-strong: var(--p-gallery-900);
  --hairline: rgba(10, 10, 12, 0.12);

  --scrim-top: rgba(10, 10, 12, 0.02);
  --scrim-bottom: rgba(10, 10, 12, 0.06);
  --scrim-side: rgba(255, 255, 255, 0.70);

  --elev-1: 4px 4px 0 var(--p-gallery-900);
  --elev-2: 6px 6px 0 var(--p-gallery-900);

  /* Image treatment vars (light): bright gallery duotone */
  --img-bg: var(--p-gallery-200);
  --img-filter: grayscale(0.20) contrast(1.08) brightness(1.02);
  --img-blend: multiply;
  --img-accent-opacity: 0.22;
  --img-scrim: linear-gradient(180deg,
                rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.0) 45%,
                rgba(244,244,245,0.35) 80%, rgba(244,244,245,0.85) 100%);
}

/* ---------------------------------------------------------------------------
   TIER 2b — ACCENT (track axis). Default = Defendo blood-red.
   The accent ramp is the ONE swap that re-skins everything.
   --------------------------------------------------------------------------- */
:root,
[data-track="defendo"] {
  --accent: var(--p-red-500);
  --accent-strong: var(--p-red-600);
  --accent-bright: var(--p-red-300);
  --accent-contrast: #ffffff;
  --accent-soft: rgba(236, 31, 23, 0.14);
  --accent-line: rgba(236, 31, 23, 0.40);
  --track-name: "Classic Krav Maga · Defendo";
}
[data-track="kick"] {
  --accent: var(--p-amber-500);
  --accent-strong: var(--p-amber-600);
  --accent-bright: var(--p-amber-300);
  --accent-contrast: #1a0e00;
  --accent-soft: rgba(255, 122, 0, 0.16);
  --accent-line: rgba(255, 122, 0, 0.42);
  --track-name: "Ironman Kickboxing";
}
[data-track="safekid"] {
  --accent: var(--p-jade-500);
  --accent-strong: var(--p-jade-600);
  --accent-bright: var(--p-jade-300);
  --accent-contrast: #00130c;
  --accent-soft: rgba(18, 184, 134, 0.16);
  --accent-line: rgba(18, 184, 134, 0.42);
  --track-name: "Safe Kid";
}

/* ---------------------------------------------------------------------------
   TIER 3 — COMPONENT (read by kit.css; never reference primitives directly)
   --------------------------------------------------------------------------- */
:root {
  /* Buttons */
  --btn-primary-bg: var(--accent);
  --btn-primary-text: var(--accent-contrast);
  --btn-primary-bg-hover: var(--accent-strong);
  --btn-ghost-border: var(--border-strong);
  --btn-ghost-text: var(--text);
  --btn-ghost-bg-hover: var(--surface-raised);

  /* Cards / frames */
  --card-bg: var(--surface-raised);
  --card-border: var(--border);
  --card-border-hover: var(--accent);

  /* Eyebrow / tag */
  --eyebrow-color: var(--accent);
  --tag-bg: var(--accent-soft);
  --tag-text: var(--accent);
  --tag-border: var(--accent-line);

  /* Nav / bar */
  --bar-bg: var(--surface-base);
  --bar-border: var(--border);

  /* Accent rule (the diagonal red bar that recurs) */
  --rule-accent: var(--accent);

  /* Stat / tale-of-the-tape */
  --stat-value: var(--text);
  --stat-label: var(--text-muted);
  --stat-divider: var(--hairline);

  /* Ascent ladder (rungs are fixed identity colors; lit rung uses accent glow) */
  --rung-track: var(--surface-overlay);
  --rung-inactive-text: var(--text-faint);
  --rung-lit-glow: var(--accent);
}