/* Sontaga design tokens. Generated from tokens.json; edit tokens.json, not this file. */
:root {
  --green: #1f6f43; /* Primary brand colour (kept from v0) */
  --green-deep: #17573a; /* Pressed / hover state of green buttons */
  --green-tint: #e5f2ea; /* Confirmed badge ground; selected or highlighted fixture rows */
  --sun: #f2b632; /* The Sunday sun / ball in the logo, the tagline on green */
  --sun-tint: #fdf2d6; /* Waiting badge ground */
  --ink: #1b1f1d; /* Body text and headings on bg */
  --ink-soft: #3d4641; /* Played badge text on neutral-tint */
  --muted: #5d6762; /* Secondary text, meta lines (venue, kick-off) on bg */
  --line: #dfe5e1; /* Dividers between rows and card edges only (decorative, 1 */
  --line-strong: #7c8781; /* Borders of inputs, selects and secondary buttons */
  --bg: #f6f8f7; /* Page background of the web app */
  --surface: #ffffff; /* Cards, fixture rows, sheets, inputs */
  --neutral-tint: #eef1ef; /* Played badge ground; table header rows */
  --warning: #8a5a00; /* Waiting state text and icon (kept from v0): on surface 5 */
  --error: #a3221b; /* Cancelled state and form errors (kept from v0): on surface 7 */
  --error-tint: #fbe7e5; /* Cancelled badge ground; error message boxes */
  --on-green: #ffffff; /* Text and icons on green and green-deep fills */
  --status-confirmed-fg: var(--green-deep); /* Confirmed badge text + tick icon, on status-confirmed-bg */
  --status-confirmed-bg: var(--green-tint); /* Confirmed badge ground */
  --status-waiting-fg: var(--warning); /* Waiting badge text + clock icon, on status-waiting-bg */
  --status-waiting-bg: var(--sun-tint); /* Waiting badge ground */
  --status-cancelled-fg: var(--error); /* Cancelled badge text + cross icon, on status-cancelled-bg */
  --status-cancelled-bg: var(--error-tint); /* Cancelled badge ground */
  --status-played-fg: var(--ink-soft); /* Played (score in) badge text, on status-played-bg */
  --status-played-bg: var(--neutral-tint); /* Played badge ground */
  --focus: var(--green); /* Keyboard focus ring: 2px solid, 2px offset */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 999px;
  --tap-min: 48px;
  --logo-min-symbol: 16px;
  --logo-min-lockup: 24px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Type styles */
.display { font: 700 28px/34px var(--font-sans); letter-spacing: -0.01em; }
.title { font: 700 20px/26px var(--font-sans); }
.heading { font: 600 17px/24px var(--font-sans); }
.body { font: 400 16px/24px var(--font-sans); }
.label { font: 600 16px/20px var(--font-sans); }
.small { font: 400 14px/20px var(--font-sans); }
.badge { font: 600 13px/16px var(--font-sans); }
.score { font: 700 22px/26px var(--font-sans); }
.score { font-variant-numeric: tabular-nums; }

/* Ramps and public-site tokens (docs/brand/tokens.json: ramps, public). */
:root {
  --green-50: #e5f2ea;
  --green-100: #c1dacc;
  --green-200: #9ac0ab;
  --green-300: #72a689;
  --green-400: #4b8c68;
  --green-500: #3a805a;
  --green-600: #1f6f43;
  --green-700: #17573a;
  --green-800: #103d29;
  --green-900: #0a271a;
  --sun-50: #fdf2d6;
  --sun-100: #fae0a5;
  --sun-200: #f6ce74;
  --sun-300: #f4bf4b;
  --sun-400: #f2b632;
  --sun-500: #ce9620;
  --sun-600: #a9760f;
  --sun-700: #8a5a00;
  --sun-800: #613f00;
  --sun-900: #3e2800;
  --surface-raised: #ffffff; /* Cards that sit above surface */
  --link: var(--green); /* Links and the accent on bg */
  --pitch: var(--green-50); /* The score block on match cards and the home hero: daylight */
  --pitch-ink: var(--green-800); /* Scores, kick-off and headings on pitch (10.58:1) */
  --pitch-soft: var(--green-deep); /* Small text on pitch (7.4:1) */
  --pitch-muted: var(--green-400); /* The losing score on pitch (3.47:1, large bold text only) */
  --pitch-accent: var(--warning); /* "FT", confirmation ticks and highlights on pitch (5.14:1) */
  --score-confirmed: var(--green-500); /* A score both teams agree on, with a tick (4.1:1 on pitch: large bold text) */
  --score-reported: var(--ink); /* A score one team has reported so far (15.5:1 on pitch) */
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif; /* Display, town names and scores only, public site */
}

/* Dark (docs/brand/tokens.json: dark). Public site only, and only when the visitor
   switches to it (<html data-theme="dark">, set by the theme switch): light is the
   default, and the team web app stays light. */
:root[data-theme="dark"] {
  --bg: #0d1f15;
  --surface: #13281c;
  --surface-raised: #183224;
  --ink: #eef1ef;
  --ink-soft: #d5ded8;
  --muted: #a7c2b2;
  --line: #234433;
  --line-strong: #5c7d6a;
  --link: #7fd0a0;
  --focus: #7fd0a0;
  --neutral-tint: #263a2f;
  --status-confirmed-fg: #a6e2bd;
  --status-confirmed-bg: #1d4a31;
  --status-waiting-fg: #f6d27e;
  --status-waiting-bg: #46360f;
  --status-cancelled-fg: #f6aaa2;
  --status-cancelled-bg: #4d1d19;
  --status-played-fg: #d5ded8;
  --status-played-bg: #263a2f;
  --pitch: #17573a;
  --pitch-ink: #ffffff;
  --pitch-soft: #dde6e1;
  --pitch-muted: #9ac0ab;
  --pitch-accent: #f2b632;
  --score-confirmed: #a6e2bd;
  --score-reported: #ffffff;
  --green-tint: var(--status-confirmed-bg);
  --error-tint: var(--status-cancelled-bg);
  --sun-tint: var(--status-waiting-bg);
  color-scheme: dark;
}