/* Design tokens — colors, type, spacing (light + dark themes) */
/* Part of Jowie Tan's site — see CLAUDE.md for structure notes. */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --bg: #07080d;
  --bg-elev: #0d0f17;
  --bg-card: #101320;
  --bg-card-2: #141826;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f2f4fb;
  --text-dim: #a7adc4;
  --text-faint: #6b7390;
  --accent: #4d7cff;       /* electric blue */
  --accent-2: #9d5cff;     /* purple */
  --accent-3: #38e8ff;     /* cyan edge */
  --accent-glow: rgba(77,124,255,0.45);
  --grid-line: rgba(120,140,255,0.06);
  --shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;
  --nav-h: 72px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
html[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-card-2: #f1f3fa;
  --border: rgba(15,20,40,0.10);
  --border-strong: rgba(15,20,40,0.18);
  --text: #0c1124;
  --text-dim: #475069;
  --text-faint: #8089a3;
  --accent: #3a63e8;
  --accent-2: #8338e8;
  --accent-3: #1aa9d6;
  --accent-glow: rgba(58,99,232,0.28);
  --grid-line: rgba(40,70,200,0.06);
  --shadow: 0 30px 70px -34px rgba(40,55,120,0.35);
}