/* ── TOKENS: variables, dark mode, base ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:  #691CFF;
  --teal:    #00D6C5;
  --ink:     #1A1A2E;
  --body:    #4D4D4D;
  --muted:   #7A7D8A;
  --bg:      #F0F2F6;
  --white:   #FFFFFF;
  --surface: #F7F8FA;
  --border:  #E3E5EC;
  --danger:  #FF4444;
  --warning: #F59E0B;
  --success: #00D6C5;
  --nav-bg:  #1A1A2E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --white:   #0D0D14;
    --bg:      #141420;
    --surface: #1A1A28;
    --ink:     #EEEEF2;
    --body:    #C0C0CC;
    --muted:   #8888A0;
    --border:  #2A2A3C;
    --purple:  #8B5CF6;
    --nav-bg:  #0A0A10;
  }
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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