/* Forge City Circuit — design tokens
   Carried over 1:1 from the identity system canvas (Main / Baseball /
   Basketball / FlagFootball / Palette .dc.html artboards). */
@font-face{font-family:Anton;src:url('../../assets/fonts/anton-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../../assets/fonts/barlow-condensed-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../../assets/fonts/barlow-condensed-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../../assets/fonts/barlow-condensed-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../../assets/fonts/barlow-condensed-500-italic.ttf') format('truetype');font-style:italic;font-weight:500;font-display:swap}

:root {
  /* ground */
  --ink: oklch(0.16 0.015 40);
  --panel: oklch(0.24 0.02 40);
  --panel-2: oklch(0.20 0.015 40);
  --paper: oklch(0.97 0.004 80);
  --steel: oklch(0.55 0.01 250);
  --steel-soft: oklch(0.68 0.02 250);
  --hairline: oklch(0.97 0.004 80 / 0.12);
  --hairline-strong: oklch(0.97 0.004 80 / 0.35);

  /* sport accents */
  --league-red: oklch(0.55 0.21 25);
  --forge-amber: oklch(0.62 0.16 55);
  --circuit-blue: oklch(0.5 0.06 240);
  --rivet-gold: oklch(0.78 0.14 85);

  /* fonts */
  --font-display: 'Anton', sans-serif;
  --font-body: 'Barlow Condensed', sans-serif;

  /* layout */
  --maxw: 1180px;
  --radius: 0px; /* the system stays sharp-cornered / chamfered, never rounded */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    repeating-linear-gradient(135deg, oklch(0.22 0.015 40 / 0.5) 0px, oklch(0.22 0.015 40 / 0.5) 2px, transparent 2px, transparent 26px),
    var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--league-red); }
img, svg { display: block; }
button, a, select { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--rivet-gold); outline-offset: 3px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
}

.tag {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--steel);
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
}

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

::selection { background: var(--league-red); color: var(--paper); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 14px; top: 12px; z-index: 1000;
  padding: 10px 14px; background: var(--paper); color: var(--ink);
  transform: translateY(-180%); font-weight: 700; letter-spacing: 1px;
}
.skip-link:focus { transform: none; }
.loading-state { min-height: 100vh; display: grid; place-items: center; }
.loading-state p { color: var(--steel-soft); }
.error-state { max-width: 720px; padding: 72px 24px; margin: 0 auto; }
.error-state h1 { margin-bottom: 14px; }
.error-state p { color: var(--steel-soft); font-size: 18px; }

@media (max-width: 640px) {
  .container { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }