/* =====================================================================
   THEME SYSTEM
   ---------------------------------------------------------------------
   Colors are split into two layers:

   1. STRUCTURAL tokens (radii, fonts) live in :root and never change
      between themes.
   2. PALETTE tokens live in the [data-theme="..."] blocks below. To add a
      new theme you copy one palette block, rename it, and change values.

   The brand accent is stored as an RGB CHANNEL ( --accent-rgb: 32,217,130 )
   so every translucent accent tint across the app -- rgba(var(--accent-rgb), A)
   -- recolors from this single line. Re-skinning the whole app to a new
   accent is therefore a one-line change per theme.

   Default theme is dark: the full dark palette lives in :root so the app
   renders correctly even before JS sets data-theme (no flash, no JS = still
   works). [data-theme="light"] only overrides what differs.

   See static/js/theme.js for the toggle + persistence wiring.
   ===================================================================== */
:root {
      /* --- structural (theme-independent) --- */
      --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px;
      font-family: Inter, ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
      font-size: 14px; line-height: 1.5;

      /* --- default palette: DARK (mirrored by [data-theme="dark"]) --- */
      color-scheme: dark;
      --accent-rgb: 32,217,130;
      --accent: rgb(var(--accent-rgb));
      --accent-dim: rgba(var(--accent-rgb), 0.10);
      --accent-mid: rgba(var(--accent-rgb), 0.18);
      --on-accent: #021a0e;          /* text/icon color sitting on an accent fill */
      --bg: #04100c; --surface: #07150f; --panel: #0c1e17; --panel-2: #102519;
      --line: #1a3829; --line-strong: #265c3f;
      --text: #e2eee7; --muted: #709c84;
      --danger: #f06060; --warn: #f0b040;
      /* Translucent surface CHANNELS for flat chrome (panels, rows, header, cards)
         that previously hardcoded a dark green. They flip with the theme so the
         token text on them stays legible. rgba(var(--surface-rgb), A). */
      --surface-rgb: 7,21,15;     /* base flat panel / list row / header */
      --surface-2-rgb: 12,30,23;  /* feature panels, hovers */
      --surface-3-rgb: 10,28,19;  /* raised options (e.g. team-dial rows) */

      background: var(--bg); color: var(--text);
    }

    /* Explicit dark block so an app that sets data-theme="dark" is identical
       to the bare default above. */
    [data-theme="dark"] {
      color-scheme: dark;
      --accent-rgb: 32,217,130;
      --accent: rgb(var(--accent-rgb));
      --accent-dim: rgba(var(--accent-rgb), 0.10);
      --accent-mid: rgba(var(--accent-rgb), 0.18);
      --on-accent: #021a0e;
      --bg: #04100c; --surface: #07150f; --panel: #0c1e17; --panel-2: #102519;
      --line: #1a3829; --line-strong: #265c3f;
      --text: #e2eee7; --muted: #709c84;
      --danger: #f06060; --warn: #f0b040;
      --surface-rgb: 7,21,15;
      --surface-2-rgb: 12,30,23;
      --surface-3-rgb: 10,28,19;
    }

    /* LIGHT theme. Overrides the palette tokens; structural tokens inherit.
       The accent hue is kept (it reads well on light too) but darkened a
       touch so it stays legible on pale surfaces. Deep in-match screens
       (field, retro scoreboard, coin) keep their own bespoke art colors and
       are intentionally not re-skinned by this palette. */
    [data-theme="light"] {
      color-scheme: light;
      --accent-rgb: 13,165,92;
      --accent: rgb(var(--accent-rgb));
      --accent-dim: rgba(var(--accent-rgb), 0.10);
      --accent-mid: rgba(var(--accent-rgb), 0.16);
      --on-accent: #ffffff;
      --bg: #eef3f0; --surface: #ffffff; --panel: #ffffff; --panel-2: #f3f7f5;
      --line: #d7e2db; --line-strong: #b6cabe;
      --text: #14241c; --muted: #5b7567;
      --danger: #c43a3a; --warn: #b27d18;
      --surface-rgb: 255,255,255;
      --surface-2-rgb: 244,248,246;
      --surface-3-rgb: 236,242,239;
    }

    /* DARK THEME ISLANDS.
       The immersive game screens (matchup lobby, toss, team selection, live
       match) and the complex hub screens are designed as dark "broadcast"
       consoles: dark panels with hardcoded bright/gold team text and bespoke
       art (field green, retro blue, coin gold). They are intentionally NOT
       re-skinned to light -- a light version would need its own art pass.

       Rather than override dozens of properties, we re-declare the DARK palette
       tokens on each screen root while in light mode. Every descendant that
       uses a token (surface channel, text, panel, accent) instantly reverts to
       its dark value, so these subtrees render exactly as in the dark theme,
       sitting as dark cards on the light page shell. */
    [data-theme="light"] #lobbyScreen,
    [data-theme="light"] #tossScreen,
    [data-theme="light"] #matchScreen,
    [data-theme="light"] #testingScreen,
    [data-theme="light"] #careerHubScreen,
    [data-theme="light"] #wcHubScreen,
    [data-theme="light"] #selectionScreen,
    [data-theme="light"] #franchiseRetentionScreen,
    [data-theme="light"] #franchiseAuctionScreen,
    [data-theme="light"] #franchiseHubScreen {
      color-scheme: dark;
      --accent-rgb: 32,217,130;
      --accent: rgb(var(--accent-rgb));
      --accent-dim: rgba(var(--accent-rgb), 0.10);
      --accent-mid: rgba(var(--accent-rgb), 0.18);
      --on-accent: #021a0e;
      --bg: #04100c; --surface: #07150f; --panel: #0c1e17; --panel-2: #102519;
      --line: #1a3829; --line-strong: #265c3f;
      --text: #e2eee7; --muted: #709c84;
      --danger: #f06060; --warn: #f0b040;
      --surface-rgb: 7,21,15;
      --surface-2-rgb: 12,30,23;
      --surface-3-rgb: 10,28,19;
      color: var(--text);
    }
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse 55% 35% at 18% -6%, rgba(var(--accent-rgb), 0.11) 0%, transparent 55%), linear-gradient(180deg, #060f0b 0%, #04100c 55%, #020a06 100%); }
    [data-theme="light"] body { background: radial-gradient(ellipse 55% 35% at 18% -6%, rgba(var(--accent-rgb), 0.10) 0%, transparent 55%), linear-gradient(180deg, #f6faf8 0%, #eef3f0 55%, #e6ede9 100%); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { font-size: clamp(24px, 4vw, 42px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 4px; }
    h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }
    h3 { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin: 20px 0 8px; }
    .eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; }
    .muted { color: var(--muted); font-size: 13px; }
    .winner { color: var(--accent); font-weight: 800; font-size: 15px; }
    .score { font-size: clamp(26px, 4vw, 42px); font-weight: 900; letter-spacing: -0.05em; margin: 4px 0 10px; line-height: 1.1; }
    header { padding: 14px clamp(14px, 4vw, 40px); border-bottom: 1px solid var(--line); background: rgba(var(--surface-rgb), 0.94); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); }
    header.slim { padding: 9px clamp(14px, 4vw, 40px); }
    .hero { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
    .hero-compact .hero-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
    .hero-compact h1 { font-size: 21px; margin: 0; }
    .hero-compact .eyebrow { font-size: 10px; white-space: nowrap; }
    .hero-compact .muted { margin: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hero-compact .hero-nav .nav-button { padding: 7px 14px; }
    @media (max-width: 720px) { .hero-compact .muted { display: none; } }