/* Theme engine.
   Two team colors go in (--team-1, --team-2, set by theme.js); every other
   color is derived here in OKLCH. Lightness is PINNED per role, so ink on
   ground, type on the structure band and the accent all keep their contrast
   for any of the 63 teams — the hue and a little chroma are all that move.
   Light mode reads like a printed gameday program; dark mode like a stadium
   at night tinted by the team's primary. Data marks never take team color. */
:root {
  color-scheme: light dark;
  --team-1: #2E5EAA;
  --team-2: #C9A227;
  --accent-src: var(--team-2);      /* theme.js: the more colorful of the two */

  /* 60% — ground and surfaces */
  --ground:    light-dark(oklch(from var(--team-1) 0.975 min(c, 0.010) h),
                          oklch(from var(--team-1) 0.145 min(c, 0.035) h));
  --surface:   light-dark(oklch(from var(--team-1) 0.995 min(c, 0.004) h),
                          oklch(from var(--team-1) 0.195 min(c, 0.045) h));
  --surface-2: light-dark(oklch(from var(--team-1) 0.945 min(c, 0.018) h),
                          oklch(from var(--team-1) 0.245 min(c, 0.050) h));
  --line:      light-dark(oklch(from var(--team-1) 0.885 min(c, 0.025) h),
                          oklch(from var(--team-1) 0.300 min(c, 0.050) h));
  --line-2:    light-dark(oklch(from var(--team-1) 0.800 min(c, 0.030) h),
                          oklch(from var(--team-1) 0.380 min(c, 0.050) h));

  /* Ink — pinned lightness: ≥ 12:1 on ground for every team */
  --ink:       light-dark(oklch(from var(--team-1) 0.210 min(c, 0.045) h),
                          oklch(from var(--team-1) 0.945 min(c, 0.018) h));
  --ink-dim:   light-dark(oklch(from var(--team-1) 0.450 min(c, 0.050) h),
                          oklch(from var(--team-1) 0.760 min(c, 0.040) h));
  --ink-faint: light-dark(oklch(from var(--team-1) 0.600 min(c, 0.040) h),
                          oklch(from var(--team-1) 0.600 min(c, 0.040) h));

  /* 30% — the structure band (rail, hero, scorebug): team primary, clamped */
  --structure:   light-dark(oklch(from var(--team-1) clamp(0.27, l, 0.40) c h),
                            oklch(from var(--team-1) clamp(0.22, l, 0.33) c h));
  --structure-2: light-dark(oklch(from var(--team-1) clamp(0.33, calc(l + 0.06), 0.46) c h),
                            oklch(from var(--team-1) clamp(0.28, calc(l + 0.06), 0.40) c h));
  --on-structure:     oklch(from var(--team-1) 0.975 min(c, 0.010) h);
  --on-structure-dim: oklch(from var(--team-1) 0.820 min(c, 0.040) h);
  --accent-on-structure: oklch(from var(--accent-src) clamp(0.80, l, 0.90) max(c, 0.10) h);

  /* 10% — accent: dark enough for text on paper, bright enough on night */
  --accent:      light-dark(oklch(from var(--accent-src) clamp(0.36, l, 0.49) max(c, 0.10) h),
                            oklch(from var(--accent-src) clamp(0.76, l, 0.88) max(c, 0.10) h));
  --accent-ink:  light-dark(oklch(from var(--accent-src) 0.985 0.005 h),
                            oklch(from var(--accent-src) 0.160 0.020 h));
  --accent-soft: light-dark(oklch(from var(--accent-src) 0.940 min(c, 0.060) h),
                            oklch(from var(--accent-src) 0.270 min(c, 0.070) h));

  /* Vivid team colors — decoration only: stripes, ribbons, glows. Never behind text. */
  --vivid-1: var(--team-1);
  --vivid-2: var(--team-2);

  /* Data marks — fixed. A gain is green under every team; ours is always --mark-a. */
  --pos:    light-dark(#1F7A3D, #4CBB72);
  --neg:    light-dark(#B3372E, #E06A5F);
  --mark-a: light-dark(#2E5EAA, #86ADF2);   /* our model */
  --mark-b: light-dark(#A87F14, #D9B347);   /* Sleeper / the other model */
  --mark-c: light-dark(#5B6B84, #93A1BA);   /* neutral */
  --pos-soft: light-dark(#E3F2E8, #10301C);
  --neg-soft: light-dark(#F8E4E1, #3A1613);

  --shadow-1: light-dark(0 1px 2px oklch(0 0 0 / .06), 0 1px 2px oklch(0 0 0 / .55));
  --shadow-2: light-dark(0 8px 24px oklch(from var(--team-1) 0.35 c h / .12),
                         0 10px 30px oklch(0 0 0 / .55));
  --focus: 0 0 0 3px oklch(from var(--accent) l c h / .45);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", Oswald, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-0: .78rem; --fs-1: .9rem; --fs-2: 1rem; --fs-3: 1.2rem; --fs-4: 1.6rem;
  --fs-5: 2.25rem; --fs-6: 3.4rem; --fs-7: 5rem;
  --r-1: 8px; --r-2: 14px; --r-3: 22px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 36px; --sp-7: 56px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 140ms; --t-med: 280ms; --t-slow: 600ms;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Kickoff mode — bigger type, flatter chrome, dim text promoted to full ink.
   For a phone on the couch on Sunday. */
:root[data-mode="kickoff"] {
  --fs-1: 1rem; --fs-2: 1.12rem; --fs-3: 1.38rem; --fs-4: 1.9rem;
  --fs-5: 2.8rem; --fs-6: 4.2rem; --fs-7: 6rem;
  --ink-dim: var(--ink);
  --shadow-1: none; --shadow-2: none;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}