/* AI Football — shared design system (Package 1). Light "matchday" theme: chalk paper, turf green, floodlight amber.
   Self-contained: the Archivo font (SIL OFL) is bundled in assets/fonts; no external requests. */
@font-face {
  font-family: "Archivo AF";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations"), url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* chalk paper neutrals, tinted toward turf green */
  --bg: oklch(0.977 0.007 145);
  --bg-2: oklch(0.958 0.011 145);
  --surface: oklch(0.993 0.004 145);
  --surface-2: oklch(0.945 0.013 145);
  --surface-3: oklch(0.905 0.018 145);
  --line: oklch(0.30 0.04 155 / 0.13);
  --line-strong: oklch(0.30 0.04 155 / 0.26);
  --text: oklch(0.21 0.03 158);
  --text-2: oklch(0.34 0.028 158);
  --muted: oklch(0.47 0.022 158);
  --dim: oklch(0.60 0.016 158);
  /* turf green: the brand colour */
  --turf: oklch(0.46 0.13 152);
  --turf-deep: oklch(0.33 0.09 155);
  --turf-ink: oklch(0.25 0.06 158);
  --turf-bright: oklch(0.62 0.16 148);
  --turf-wash: oklch(0.93 0.04 148);
  --chalk: oklch(0.985 0.006 120);
  --floodlight: oklch(0.83 0.15 85);
  /* legacy token names kept so every stylesheet re-themes from here */
  --navy: var(--turf-deep);
  --navy-2: var(--turf-ink);
  --light: var(--turf);          /* accent for links, highlights, active states */
  --light-2: var(--turf-deep);
  --pitch: var(--turf-bright);
  --pitch-deep: var(--turf-ink);
  --pitch-mid: var(--turf);
  --on-accent: var(--chalk);     /* text on accent backgrounds */
  --team-a: oklch(0.985 0.006 120);
  --team-a-edge: oklch(0.36 0.06 158);
  --team-b: oklch(0.80 0.15 72);
  --team-b-edge: oklch(0.48 0.11 60);
  --ball: oklch(0.99 0 0);
  /* evidence labels, tuned for light backgrounds */
  --ev-verified: oklch(0.47 0.12 155);
  --ev-hypothesis: oklch(0.47 0.13 255);
  --ev-assumption: oklch(0.52 0.12 70);
  --ev-pending: oklch(0.52 0.17 30);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 60px -32px oklch(0.30 0.06 155 / 0.35), 0 2px 6px -2px oklch(0.30 0.06 155 / 0.10);
  --font: "Archivo AF", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo AF", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: clamp(16px, 4.5vw, 64px);
  --maxw: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--turf); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--turf-ink); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.04; margin: 0 0 0.5em; letter-spacing: -0.01em; font-weight: 760; font-stretch: 78%; color: var(--turf-ink); }
h3, h4 { font-stretch: 88%; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
code, pre, .mono { font-family: var(--mono); font-size: 0.86em; }
::selection { background: oklch(0.85 0.12 148 / 0.6); }

:focus-visible { outline: 2.5px solid var(--turf); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--turf-ink); color: var(--chalk); padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* Section marker: a squad-number system (big condensed numeral + plain label), used once per section. */
.eyebrow { display: inline-flex; gap: 14px; align-items: baseline; color: var(--turf); font-weight: 600; font-size: 15px; letter-spacing: 0; }
.eyebrow .num { font-family: var(--display); font-stretch: 62%; font-weight: 800; font-size: 44px; line-height: .8; color: var(--turf); letter-spacing: -0.02em; }

.lede { font-size: clamp(18px, 1.55vw, 21px); color: var(--text-2); max-width: 62ch; }
.muted { color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--turf-ink); padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 650;
  text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease), color .2s;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--turf); color: var(--turf-ink); background: var(--turf-wash); } }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--turf); color: var(--on-accent); border-color: var(--turf); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--turf-deep); border-color: var(--turf-deep); color: var(--on-accent); } }
.btn[aria-pressed="true"], .btn.is-on { background: var(--turf-wash); border-color: var(--turf); color: var(--turf-ink); }

/* Evidence labels */
.ev { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; vertical-align: middle; line-height: 1.5; background: var(--surface); }
.ev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ev-verified { color: var(--ev-verified); }
.ev-hypothesis { color: var(--ev-hypothesis); }
.ev-assumption { color: var(--ev-assumption); }
.ev-pending { color: var(--ev-pending); }

/* Concept media slot: real image when available (assets/img/images.js), illustrated placeholder otherwise. */
.concept {
  position: relative; overflow: hidden; border-radius: var(--radius); background-color: var(--turf-ink);
  background-size: cover; background-position: center; isolation: isolate;
}
.concept-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; font-size: 12px; font-weight: 600;
  color: var(--turf-ink); background: oklch(0.985 0.006 120 / 0.88); padding: 4px 10px; border-radius: 999px;
}
.concept-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.concept.has-image .concept-art { display: none; }

/* Notices */
.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px;
  border: 1px solid oklch(0.52 0.12 70 / .4); background: oklch(0.96 0.04 85); color: var(--text-2); font-size: 15px;
}
.notice strong { color: var(--ev-assumption); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}