:root {
  --color-bg: #0b0f1a;
  --color-bg-2: #131a2c;
  --color-surface: #1a2238;
  --color-surface-2: #222c48;
  --color-border: rgba(255,255,255,0.08);
  --color-fg: #f2f4f8;
  --color-fg-muted: #9aa4bd;
  --color-fg-dim: #6c7592;
  --color-accent: #7c5cff;
  --color-accent-2: #ec4899;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #f43f5e;
  --color-info: #06b6d4;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px -4px rgba(0,0,0,0.4);
  --shadow-md: 0 14px 30px -12px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.6);
  --shadow-pop: 0 10px 24px -6px rgba(124,92,255,0.5);

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.2, .9, .3, 1.3);

  --topbar-h: 56px;
  --bottomnav-h: 64px;
  --page-pad: 16px;
}

@media (prefers-color-scheme: light) {
  :root { /* we stay dark — it looks better for a TikTok-y product */ }
}