/* Pokey design tokens for the web (brand/BRAND.md). Copied verbatim into the portal by brand/tools/sync.sh.
   Load fonts in <head>:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Sora:wght@500&display=swap" rel="stylesheet">
   Theme: follows the system by default; set data-theme="light" or "dark" on <html> to override. */

:root {
  --font-heading: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-control: 10px;
  --radius-card: 12px;
  --radius-sheet: 20px;

  /* Light theme values (default) */
  --color-bg: #FBF9F4;
  --color-card: #F2ECDD;
  --color-raised: #E6DDC8;
  --color-text: #0E2A3A;
  --color-text-secondary: #4E5E66;
  --color-accent: #1F5FB8;
  --color-accent-text: #1F5FB8;
  --color-button-bg: #1F5FB8;
  --color-button-text: #FBF9F4;
  --color-team: #1F5FB8;
  --color-opponent: #9C7200;
  --color-team-player-1: #0E7490;
  --color-team-player-2: #6A4FC8;
  --color-opponent-player-1: #B4366E;
  --color-opponent-player-2: #4C6A16;
  --color-divider: #E6DDC8;
  --color-success: #246A4B;
  --color-warning: #7A5400;
  --color-danger: #B3261E;
  --color-outcome-blocked: #7A38B8;
  --color-outcome-defended: #0E6BA8;
  --color-outcome-block-error: #9F5000;
  --color-outline: #76848B;
  --color-focus: #1F5FB8;
  --color-state-hover: rgba(14, 42, 58, 0.08);
  --color-state-pressed: rgba(14, 42, 58, 0.12);
  --color-state-selected: rgba(31, 95, 184, 0.12);
  --color-state-flash: rgba(36, 106, 75, 0.28);
  --color-scrim: rgba(14, 42, 58, 0.6);
  --opacity-disabled: 0.38;

  /* Action palette (BRAND.md 8.5): video overlays only, same in both themes. */
  --color-action-serve: #FBF9F4;
  --color-action-reception: #137F6E;
  --color-action-set: #9A6BFF;
  --color-action-attack: #E0409A;
  --color-action-defense: #63D46A;
  --color-action-block: #0E2A3A;
  --color-action-unknown: #9FB4BF;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0E2A3A;
    --color-card: #173A4D;
    --color-raised: #1F4659;
    --color-text: #FBF9F4;
    --color-text-secondary: #9FB4BF;
    --color-accent: #5896F2;
    --color-accent-text: #86B4F7;
    --color-button-bg: #5896F2;
    --color-button-text: #0E2A3A;
    --color-team: #5896F2;
    --color-opponent: #F4C542;
    --color-team-player-1: #4FB8D4;
    --color-team-player-2: #A58BF5;
    --color-opponent-player-1: #F07AA8;
    --color-opponent-player-2: #A3B84E;
    --color-divider: rgba(159, 180, 191, 0.25);
    --color-success: #6CC59A;
    --color-warning: #F2A65A;
    --color-danger: #F39A8F;
    --color-outcome-blocked: #C4A1FF;
    --color-outcome-defended: #7CC4F5;
    --color-outcome-block-error: #F0932B;
    --color-outline: #7893A0;
    --color-focus: #86B4F7;
    --color-state-hover: rgba(251, 249, 244, 0.08);
    --color-state-pressed: rgba(251, 249, 244, 0.12);
    --color-state-selected: rgba(88, 150, 242, 0.16);
    --color-state-flash: rgba(108, 197, 154, 0.28);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0E2A3A;
  --color-card: #173A4D;
  --color-raised: #1F4659;
  --color-text: #FBF9F4;
  --color-text-secondary: #9FB4BF;
  --color-accent: #5896F2;
  --color-accent-text: #86B4F7;
  --color-button-bg: #5896F2;
  --color-button-text: #0E2A3A;
  --color-team: #5896F2;
  --color-opponent: #F4C542;
  --color-team-player-1: #4FB8D4;
  --color-team-player-2: #A58BF5;
  --color-opponent-player-1: #F07AA8;
  --color-opponent-player-2: #A3B84E;
  --color-divider: rgba(159, 180, 191, 0.25);
  --color-success: #6CC59A;
  --color-warning: #F2A65A;
  --color-danger: #F39A8F;
  --color-outcome-blocked: #C4A1FF;
  --color-outcome-defended: #7CC4F5;
  --color-outcome-block-error: #F0932B;
  --color-outline: #7893A0;
  --color-focus: #86B4F7;
  --color-state-hover: rgba(251, 249, 244, 0.08);
  --color-state-pressed: rgba(251, 249, 244, 0.12);
  --color-state-selected: rgba(88, 150, 242, 0.16);
  --color-state-flash: rgba(108, 197, 154, 0.28);
  color-scheme: dark;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.stat {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

a { color: var(--color-accent-text); }

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