/* Basketpad tokens. Two worlds, one system:
   day   — a clear sky, white panels, one blue signal (after Levity);
   night — warm ink terminal, indigo signal, gold for what is hot (after Tickerpad). */
:root,
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f8fe;
  --sky: linear-gradient(180deg, #d6e8fb 0%, #e8f2fd 34%, #f4f8fe 66%, #f7f9fc 100%);
  --glow-a: rgba(58, 111, 240, 0.12);
  --glow-b: rgba(255, 196, 64, 0.1);
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e9eef6;
  --rail: rgba(255, 255, 255, 0.72);
  --rail-border: rgba(255, 255, 255, 0.9);
  --ink: #10151c;
  --ink-2: #3d4a5c;
  --ink-3: #5f6b7c;
  --rule: #dde6f1;
  --rule-2: #c9d5e4;
  --accent: #3a6ff0;
  --accent-deep: #2553cc;
  --accent-ink: #ffffff;
  --accent-wash: rgba(58, 111, 240, 0.1);
  --gold: #b27c00;
  --gold-wash: rgba(217, 154, 0, 0.13);
  --up: #178f5e;
  --up-wash: rgba(23, 143, 94, 0.11);
  --down: #d23a57;
  --down-wash: rgba(210, 58, 87, 0.1);
  --shadow-card: 0 16px 35px rgba(44, 85, 124, 0.06);
  --shadow-lift: 0 22px 44px -18px rgba(44, 85, 124, 0.28);
  --shadow-pop: 0 30px 80px -20px rgba(20, 35, 60, 0.35);
  --scrim: rgba(22, 35, 58, 0.34);
  --focus: #1f5fe0;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0a0c11;
  --sky: linear-gradient(180deg, #0c0f16 0%, #0a0c11 60%);
  --glow-a: rgba(124, 140, 255, 0.14);
  --glow-b: rgba(255, 209, 102, 0.07);
  --surface: #12161f;
  --surface-2: #181d28;
  --surface-3: #1f2532;
  --rail: rgba(14, 17, 24, 0.72);
  --rail-border: rgba(255, 255, 255, 0.07);
  --ink: #eaedf4;
  --ink-2: #b1b8c8;
  --ink-3: #8a93a6;
  --rule: #212837;
  --rule-2: #2f3747;
  --accent: #7c8cff;
  --accent-deep: #5b69ea;
  --accent-ink: #0a0c11;
  --accent-wash: rgba(124, 140, 255, 0.14);
  --gold: #ffd166;
  --gold-wash: rgba(255, 209, 102, 0.14);
  --up: #3ddc97;
  --up-wash: rgba(61, 220, 151, 0.13);
  --down: #ff5c7a;
  --down-wash: rgba(255, 92, 122, 0.12);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 34px -18px rgba(0, 0, 0, 0.75);
  --shadow-pop: 0 30px 80px rgba(0, 0, 0, 0.55);
  --scrim: rgba(6, 8, 12, 0.62);
  --focus: #9aa8ff;
}

:root {
  --font-ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-sm: 10px;
  --r: 14px;
  --r-card: 22px;
  --r-panel: 26px;
  --max: 1240px;
  --inset: clamp(16px, 4vw, 40px);
  --head-h: 118px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}