/* 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 - kept as their own exact values rather than computed
     from the theme colors above, so this consolidation doesn't shift
     anything visually, even by a shade. How a future club's three colors
     would generate matching shades of their own is an open question for
     the setup-wizard stage, not resolved here. */
  --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;

  /* === 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;
  }
}