/* Design tokens — shared with the tournament site's established green identity */
:root {
  /* === Theme colors ===
     These three are the ones a future setup wizard (not yet built) would
     let a different club customize - primary for backgrounds/headers,
     secondary for buttons/accents, accent reserved for goal moments only.
     Everything else below is either a fixed shade derived from these
     three, or a genuinely universal UI color (danger, warning) that
     isn't part of any club's branding and wouldn't change between clubs. */
  --theme-primary: #14532d;
  --theme-secondary: #009739;
  --theme-accent: #e8b923;

  /* Existing names, kept so nothing already using them needs to change -
     now pointing at the theme variables above instead of their own
     hardcoded values. */
  --green-bright: var(--theme-secondary);
  --green-mid: #006c29;
  --green-deep: var(--theme-primary);
  --green-ink: #0b3b22;
  --gold: var(--theme-accent); /* reserved for goal moments only — used sparingly */

  /* Additional brand-derived shades used for gradients and full-page
     backgrounds. The literal values below are Swatragh's own - kept as
     the fallback for a deployment with no club-config.json (or none of
     this platform's setup wizard) at all, so nothing here changes for a
     deployment that predates any of this. When club-config.json DOES
     exist, server.js computes real per-club versions of every one of
     these (see lib/theme.js) and appends them into the same injected
     <style> block that already overrides --theme-primary/secondary/
     accent below - later in source order than this file, so they win
     via normal CSS cascade, no !important needed. This used to be an
     open question ("not resolved here") until a second, differently-
     colored club's page stayed visibly green regardless of its own
     colors - confirmed as a real bug on a live deployment, not a
     hypothetical, before lib/theme.js was written to fix it. */
  --bg-gradient-start: #16311f;
  --bg-gradient-end: #0a1a11;
  --green-tint: #d7f2e1;
  --point-gradient-start: #1caa4a;
  --point-gradient-end: #00832f;
  --goal-gradient-start: #f0c94a;
  --goal-gradient-end: #d4a51c;
  --goal-shadow: #b8891a;

  /* Companion text colors for the surfaces above whose foreground color
     used to be hardcoded (see lib/theme.js's contrastTextColor). The
     values below reproduce exactly what was previously hardcoded for
     each of these surfaces across admin.css, viewer.css, tv.css,
     coach.css, games-list.css and setup.css (they all reused the same
     --green-mid/--green-deep/--gold-derived backgrounds), so a
     deployment with no club-config.json is visually unchanged; when
     club-config.json exists,
     server.js overrides these with a real per-club contrast check. */
  --green-mid-text: var(--white);
  --green-deep-text: var(--white);
  --point-text: var(--white);
  --goal-text: var(--green-ink);
  --header-gradient-text: var(--white);

  /* === Universal UI colors — not club-themed, same for every club === */
  --danger: #b3261e;
  --danger-strong: #d63b2a;
  --warning-bg: #fff3cd;
  --warning-text: #7a5b00;
  --warning-border: #e0b400;
  /* Deliberately distinct from --danger/--danger-strong above - this is
     a positive scoring action (a 2-pointer), not a destructive one, and
     sharing the delete/error red risked reading as a warning next to the
     other score buttons. */
  --two-pointer: #c0392b;
  --two-pointer-dark: #922c20;
  /* Two different shades in real use for the same purpose (viewer/admin
     vs TV mode) - a genuine pre-existing inconsistency, not something to
     silently merge as part of a refactor whose whole point is zero
     visual change. Kept as two names; worth a deliberate look later. */
  --injury-time: #ff6b5e;
  --injury-time-tv: #ff8a7d;

  --paper: #f4f7f5;
  --white: #ffffff;
  --ink: #0f2119;
  --muted: #5c6f65;
  --line: rgba(15, 33, 25, 0.12);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 10px;
  --shadow: 0 8px 24px rgba(11, 59, 34, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}