@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p-v16-latin-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: dark;

  --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-pixel: 4px;
  --radius-panel: 6px;
  --radius-card: 4px;

  --font-display: "Press Start 2P", "Arial Black", Impact, Haettenschweiler, fantasy;
  --font-body: "Chakra Petch", Rajdhani, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Press Start 2P", "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;

  --color-bg: #080814;
  --color-bg-deep: #05060c;
  --color-panel: #141026;
  --color-panel-strong: #1f1636;
  --color-panel-soft: #281e4d;
  --color-border: #38265f;
  --color-border-strong: #a85ff7;
  --color-text: #ffffff;
  --color-muted: #c3afcf;
  --color-subtle: #9ca3af;
  --color-primary: #f5c451;
  --color-primary-strong: #ffad0a;
  --color-primary-text: #09050d;
  --color-secondary: #a85ff7;
  --color-danger: #ef4444;
  --color-playoff: #22c55e;
  --color-playin: #f59e0b;
  --color-lottery: #ef4444;
  --color-info: #22d3ee;
  --color-focus: #facc15;
  --color-glow: rgb(168 95 247 / 55%);
  --color-shadow: #000000;

  --border-panel: 2px solid var(--color-border);
  --border-strong: 2px solid var(--color-primary);
  --shadow-pixel: 4px 4px 0 var(--color-shadow);
  --shadow-glow: 0 0 18px var(--color-glow);
  --focus-ring: 0 0 0 3px var(--color-focus);

  --container-wide: 1280px;
  --container-page: 1120px;
  --container-text: 760px;
  --tap-target: 44px;

  --court: var(--color-primary);
  --ink: var(--color-bg-deep);
  --panel: var(--color-panel);
  --line: var(--color-text);
  --accent: var(--color-danger);
  --muted: var(--color-muted);

  --rmvp-bg: var(--color-bg);
  --rmvp-bg-deep: var(--color-bg-deep);
  --rmvp-panel: var(--color-panel);
  --rmvp-panel-strong: var(--color-panel-strong);
  --rmvp-panel-soft: var(--color-panel-soft);
  --rmvp-border: var(--color-border);
  --rmvp-border-strong: var(--color-border-strong);
  --rmvp-text: var(--color-text);
  --rmvp-muted: var(--color-muted);
  --rmvp-subtle: var(--color-subtle);
  --rmvp-primary: var(--color-primary);
  --rmvp-primary-strong: var(--color-primary-strong);
  --rmvp-primary-text: var(--color-primary-text);
  --rmvp-secondary: var(--color-secondary);
  --rmvp-danger: var(--color-danger);
  --rmvp-success: var(--color-playoff);
  --rmvp-warning: var(--color-playin);
  --rmvp-info: var(--color-info);
  --rmvp-focus: var(--color-focus);
  --rmvp-glow: var(--color-glow);
  --rmvp-shadow: var(--color-shadow);
  --rmvp-space-1: var(--space-1);
  --rmvp-space-2: var(--space-2);
  --rmvp-space-3: var(--space-3);
  --rmvp-space-4: var(--space-4);
  --rmvp-space-5: var(--space-5);
  --rmvp-space-6: var(--space-6);
  --rmvp-space-7: var(--space-7);
  --rmvp-space-8: var(--space-8);
  --rmvp-radius-pixel: var(--radius-pixel);
  --rmvp-radius-panel: var(--radius-panel);
  --rmvp-radius-card: var(--radius-card);
  --rmvp-border-panel: var(--border-panel);
  --rmvp-border-strong-rule: var(--border-strong);
  --rmvp-shadow-pixel: var(--shadow-pixel);
  --rmvp-shadow-glow: var(--shadow-glow);
  --rmvp-focus-ring: var(--focus-ring);
  --rmvp-container-wide: var(--container-wide);
  --rmvp-container-page: var(--container-page);
  --rmvp-container-text: var(--container-text);
  --rmvp-tap-target: var(--tap-target);
  --rmvp-font-display: var(--font-display);
  --rmvp-font-body: var(--font-body);
  --rmvp-font-mono: var(--font-mono);
}