/* Console — generated from tokens.json */

@font-face { font-family: 'Mona Sans'; src: url('/design/fonts/MonaSans-Variable.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mona Sans Expanded'; src: url('/design/fonts/MonaSansExpanded-Variable.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }

:root, [data-theme="night"] {
  --void: #05070b;
  --surface-1: #0b0e15;
  --surface-2: #121621;
  --surface-3: #1b2030;
  --surface-4: #262c3d;
  --glass: rgba(18, 22, 32, 0.62);
  --glass-strong: rgba(14, 17, 25, 0.86);
  --scrim: rgba(3, 4, 7, 0.55);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --ink: #f4f6fb;
  --ink-2: rgba(244, 246, 251, 0.72);
  --ink-3: rgba(244, 246, 251, 0.55);
  --ink-inverse: #05070b;
  --brand-mint: #7cf0c5;
  --brand-blue: #3d8bff;
  --accent: #2ee59d;
  --focus: var(--ink);
  --player-1: #3d8bff;
  --player-2: #ff4d6d;
  --player-3: #2ee59d;
  --player-4: #ffc542;
  --player-5: #b48bff;
  --player-6: #ff8a3d;
  --player-7: #32d4e6;
  --player-8: #ff6fd0;
  --face-a: #5dd65d;
  --face-b: #ff5a5f;
  --face-x: #3fa3ff;
  --face-y: #ffcc3d;
  --ps-cross: #7aa7ff;
  --ps-circle: #ff6b76;
  --ps-square: #ff8fd2;
  --ps-triangle: #38d6b0;
  --good: #5ce1a4;
  --warn: #ffd23f;
  --bad: #ff7a85;
  --live: #ff3b47;
  --shadow-tile: 0 0.6rem 1.6rem -0.6rem rgba(0, 0, 0, 0.8);
  --shadow-float: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.9);
  --shadow-modal: 0 3rem 6rem -2rem rgba(0, 0, 0, 1);
  --shadow-focus: 0 0 0 0.3rem rgba(255, 255, 255, 0.16);
  color-scheme: dark;
}

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --radius-sm: 0.4rem;
  --radius-md: 0.7rem;
  --radius-lg: 1rem;
  --radius-xl: 1.3rem;
  --radius-2xl: 1.7rem;
  --radius-pill: 999px;
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.9s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --font-display: "Mona Sans Expanded", "Mona Sans", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.display-hero { font-family: var(--font-display); font-size: 4.75rem; line-height: 1; font-weight: 700; letter-spacing: -0.025em; }
.display-banner { font-family: var(--font-display); font-size: 4rem; line-height: 1; font-weight: 750; letter-spacing: -0.015em; }
.display-title { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.15; font-weight: 650; letter-spacing: -0.015em; }
.display-score { font-family: var(--font-display); font-size: 1.2rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-tagline { font-family: var(--font-ui); font-size: 1.3rem; line-height: 1.35; font-weight: 550; }
.ui-label { font-family: var(--font-ui); font-size: 1.05rem; line-height: 1.2; font-weight: 600; }
.ui-body { font-family: var(--font-ui); font-size: 1rem; line-height: 1.55; font-weight: 420; }
.ui-meta { font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.4; font-weight: 500; }
.ui-section { font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.3; font-weight: 600; }
.ui-caption { font-family: var(--font-ui); font-size: 0.85rem; line-height: 1.4; font-weight: 500; }