:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", "Inter", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-0: 0;
  --radius-1: 10px;
  --radius-2: 10px;

  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 1200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --header-h: 56px;
  --container: 1200px;
  --slip-w: 340px;
  --tap: 44px;

  color-scheme: dark;
}

:root,
:root[data-theme="dark"] {
  --bg: #0A0D12;
  --surface-1: #11161E;
  --surface-2: #18202B;
  --surface-3: #212B38;
  --border: #2A3544;
  --border-strong: #687A91;
  --text: #F3F5F8;
  --text-2: #A9B3C1;
  --text-3: #94A0B2;
  --gold: #F5B400;
  --gold-text: #F5B400;
  --gold-hover: #FFC933;
  --on-gold: #0A0D12;
  --select-bg: #3A2E00;
  --win: #2BD17E;
  --loss: #FF6B6B;
  --push: #A9B3C1;
  --live: #FF5A5A;
  --info: #5AB0FF;
  --overlay-shadow: 0 8px 24px rgba(0, 0, 0, .45);

  --bg-elev: var(--surface-1);
  --bg-card: var(--surface-1);
  --bg-card-hover: var(--surface-3);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --text-dim: var(--text-2);
  --muted: var(--text-3);
  --gold-soft: var(--select-bg);
  --live-soft: rgba(255, 90, 90, .14);
  --down: var(--loss);
  --down-soft: rgba(255, 107, 107, .14);
  --plus: var(--win);
  --minus: var(--loss);
  --header-bg: var(--surface-1);
  --nav-bg: var(--surface-1);
  --btn-ink: var(--on-gold);
  --shadow: var(--overlay-shadow);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6F9;
  --surface-1: #FFFFFF;
  --surface-2: #EEF1F5;
  --surface-3: #E3E8EF;
  --border: #D5DCE5;
  --border-strong: #6E7A8C;
  --text: #0A0D12;
  --text-2: #4A5565;
  --text-3: #525E70;
  --gold: #F5B400;
  --gold-text: #735100;
  --gold-hover: #FFC933;
  --on-gold: #0A0D12;
  --select-bg: #FFF4CC;
  --win: #086B3C;
  --loss: #B42025;
  --push: #4A5565;
  --live: #B81C1C;
  --info: #1560B5;
  --overlay-shadow: 0 8px 24px rgba(10, 13, 18, .16);
  --live-soft: rgba(184, 28, 28, .12);
  --down-soft: rgba(180, 32, 37, .12);
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  -webkit-font-smoothing: antialiased;
}

.t-display { font: 800 44px/44px var(--font-display); text-transform: uppercase; letter-spacing: 0; }
.t-h1 { font: 700 32px/36px var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.t-h2 { font: 700 24px/28px var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.t-h3 { font: 700 17px/24px var(--font-ui); letter-spacing: 0; }
.t-body { font: 400 15px/22px var(--font-ui); }
.t-body-strong { font: 600 15px/22px var(--font-ui); }
.t-small { font: 500 13px/18px var(--font-ui); }
.t-label { font: 700 11px/14px var(--font-ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.t-price { font: 700 15px/18px var(--font-ui); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; }
.t-juice { font: 500 12px/14px var(--font-ui); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; }

@media (max-width: 767px) {
  .t-display { font-size: 36px; line-height: 36px; }
  .t-h1 { font-size: 28px; line-height: 32px; }
  .t-h2 { font-size: 20px; line-height: 24px; }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}