/* ══════════════════════════════════════════════════════════════════════
   tokens.css — DESIGN TOKENS + RESET  (load FIRST on every page)
   ──────────────────────────────────────────────────────────────────────
   Everything else (chrome.css, shell.css, components.css) reads only
   these variables. Re-theme a whole site by editing this file:

     --brand      dark base colour (header gradient, headings, footer)
     --accent     interactive colour (links, active nav, primary buttons)
     --warn/--ok/--danger/--info   status colours (+ their *-ink text tones)
     --bg / --panel / --panel-2    page ground, card surface, inset surface

   Tints are made with color-mix() from these tokens, so chips, hovers and
   callouts follow a re-theme automatically. Font: Inter (UI) + DM Mono
   (identifiers) from Google Fonts — see the <link> in starter.html.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand — Brawley Gladiators (helmet-crest logo: near-black navy to
     cobalt-blue field, gold corner glow, gunmetal helmet) ────────────── */
  --brand:       #0a1428;   /* near-black navy — header base, icon tiles, gradients */
  --brand-2:     #1c3f74;   /* cobalt blue — header gradient end */
  --accent:      #e8ab3b;   /* gladiator gold — links, active nav, primary buttons */
  --accent-lt:   #f7cf7a;   /* pale gold, on dark surfaces */
  --accent-ink:  #f2c665;   /* gold text tone on tints (light, for the dark theme) */

  /* Dark-theme extras (read by theme-gladiators.css) */
  --heading:     #f3f6fc;   /* title/heading text — --brand is too dark on dark panels */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;  /* the wordmark's Roman serif */
  --steel:       #b9c2d0;   /* gunmetal / helmet silver for subtle strokes */
  --cobalt:      #2a5bb8;   /* the logo's electric-blue glow */

  /* ── Status (ink tones brightened for dark surfaces) ───────── */
  --warn:        #dda72d;  --warn-ink:   #f0c454;
  --ok:          #1fbd73;  --ok-ink:     #5fd99b;
  --danger:      #d64545;  --danger-ink: #f07a7a;
  --info:        #3f6fb8;  --info-ink:   #8db0ec;
  --neutral:     #8b98ad;

  /* ── Surfaces & text — arena-dark ──────────────────────────── */
  --bg:          #070c18;
  --panel:       #0f1a30;
  --panel-2:     #14213d;
  --text:        #e6ebf4;
  --muted:       #9aa8c0;
  --border:      rgba(190,205,235,0.14);
  --border-soft: rgba(190,205,235,0.07);

  /* ── Elevation ─────────────────────────────────────────────── */
  --shadow-sm:   0 6px 18px rgba(0,0,0,0.35);
  --shadow:      0 16px 40px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 56px rgba(0,0,0,0.6);
  --shadow-pop:  0 14px 36px rgba(0,0,0,0.6);

  /* ── Radii ─────────────────────────────────────────────────── */
  --r-xs:  7px;
  --r-sm:  9px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  18px;
  --r-pill: 999px;

  /* ── Type ──────────────────────────────────────────────────── */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Chrome geometry (set by ui-kit.js fitShell at runtime) ── */
  --header-h:     73px;     /* mobile fixed header height */
  --bottom-nav-h: 60px;     /* mobile bottom nav height */
  --footer-h:     48px;     /* desktop fixed footer clearance */
  --wf-shell-top: 118px;    /* header + gap on desktop (measured) */
  --wf-rail-top:  124px;    /* sticky rail offset below the header */

  /* ── Derived tints (used by components; do not edit) ───────── */
  --accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-14: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-25: color-mix(in srgb, var(--accent) 25%, transparent);
  --accent-40: color-mix(in srgb, var(--accent) 40%, transparent);
  --warn-12:   color-mix(in srgb, var(--warn) 12%, transparent);
  --warn-30:   color-mix(in srgb, var(--warn) 30%, transparent);
  --ok-12:     color-mix(in srgb, var(--ok) 12%, transparent);
  --ok-28:     color-mix(in srgb, var(--ok) 28%, transparent);
  --danger-08: color-mix(in srgb, var(--danger) 8%, transparent);
  --danger-12: color-mix(in srgb, var(--danger) 12%, transparent);
  --danger-40: color-mix(in srgb, var(--danger) 40%, transparent);
  --info-12:   color-mix(in srgb, var(--info) 12%, transparent);
  --neutral-12:color-mix(in srgb, var(--neutral) 12%, transparent);
  --brand-grad: linear-gradient(135deg, var(--brand), var(--accent));
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 88%, #000) 100%);
  --header-grad: linear-gradient(135deg, color-mix(in srgb, var(--brand) 96%, #000) 0%, var(--brand-2) 100%);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  overscroll-behavior: none;              /* no iOS rubber-band on the root */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100%;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  /* Mobile: fixed header on top, bottom nav below — reserve both. */
  padding-top: var(--header-h);
  padding-bottom: var(--bottom-nav-h);
}
@media (min-width: 900px) {
  /* Desktop: header is sticky (in flow); footer is fixed at the bottom. */
  body { padding-top: 0; padding-bottom: var(--footer-h); }
}

button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
img, svg { display: block; max-width: 100%; }
svg { stroke: currentColor; }
.hidden, [hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* Motion off for those who ask. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}