/* BrawlHood design tokens (DESIGN.md §2). Every page loads this first, then site.css.
   Pages use only these names. The "legacy aliases" block at the end keeps older page stylesheets
   working while they are migrated; new code must not use those names. */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg-0: #08080a;   /* page */
  --bg-1: #101014;   /* panel */
  --bg-2: #17171d;   /* raised */
  --bg-3: #1f1f27;   /* hover */
  --line-1: #26262f;
  --line-2: #343442; /* strong */

  /* ink */
  --ink-1: #f4f4f6;  /* primary */
  --ink-2: #b9b9c4;  /* secondary */
  --ink-3: #7f7f8c;  /* muted — 4.81:1 on --bg-1 */
  --ink-4: #55555f;  /* disabled */

  /* accents */
  --gold: #f2c14e;   /* titles, prize, primary CTA — 11.3:1 on --bg-1 */
  --gold-2: #ffd97a;
  --gold-ink: #1a1300;
  --red: #e63946;    /* red corner */
  --red-2: #ff5c68;
  --blue: #3a86ff;   /* blue corner */
  --blue-2: #6aa3ff;

  /* status only — never for series */
  --ok: #3ddc84;
  --warn: #ffb020;
  --bad: #ff4d6d;
  --info: #6aa3ff;

  /* tier ramp (bronze → legend), used only for tier */
  --tier-bronze: #b87333;
  --tier-silver: #c9ccd3;
  --tier-gold: #f2c14e;
  --tier-platinum: #9fd8ff;
  --tier-legend: #ff6b3d;

  /* categorical palette — 8 archetypes in FIXED order: balanced, brawler, speedster, dodger, tank, striker, wall, duelist.
     Validated with the dataviz validator against --bg-1 (#101014, dark): all checks pass, worst adjacent CVD ΔE 9.0. */
  --cat-1: #4087de; /* balanced  — blue */
  --cat-2: #cb6620; /* brawler   — orange */
  --cat-3: #00a16f; /* speedster — teal */
  --cat-4: #a98000; /* dodger    — yellow */
  --cat-5: #c35c9b; /* tank      — magenta */
  --cat-6: #5c9932; /* striker   — green */
  --cat-7: #8e71d6; /* wall      — violet */
  --cat-8: #d15b60; /* duelist   — red */

  /* type */
  --font-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --text-hero: 64px;
  --text-hero-md: 56px;
  --text-hero-sm: 44px;
  --text-h1: 40px;
  --text-h2: 28px;
  --text-body: 15px;
  --text-small: 13px;
  --text-micro: 11px;
  --leading-body: 1.5;
  --tracking-display: 0.06em;
  --tracking-micro: 0.08em;

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* shape */
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.45);
  --focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--gold);

  /* motion */
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* layout */
  --container: 1280px;
  --gutter: 24px;
  --grid-gap: 24px;
  --topbar-h: 64px;
  --banner-h: 28px;
  --section-gap: 64px;
  --target: 44px;
}

@media (max-width: 719px) {
  :root {
    --gutter: 16px;
    --section-gap: 40px;
  }
}

/* ---- legacy aliases (older page stylesheets; do not use in new code) ---- */
:root {
  --bg: var(--bg-0);
  --line: var(--line-1);
  --fg: var(--ink-1);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --accent: var(--gold);
  --accent-2: var(--gold-2);
  --accent-ink: var(--gold-ink);
  --silver: var(--tier-silver);
  --bronze: var(--tier-bronze);
  --font: var(--font-body);
  --mono: var(--font-mono);
  --radius: var(--radius-2);
  --radius-sm: var(--radius-1);
  --shadow: var(--shadow-1);
  --max: var(--container);
  --nav-h: var(--topbar-h);
}