/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — DARK MODE (default)
═══════════════════════════════════════════════════════════ */
:root {
  --bg: #08050f;
  --deep: #0e0b1a;
  --card: #13101e;
  --card2: #181428;
  --card-hover: #1c1833;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(155, 109, 224, 0.4);
  --purple: #573198;
  --purple-light: #7b4fc4;
  --purple-lighter: #9b6de0;
  --purple-dim: rgba(87, 49, 152, 0.16);
  --purple-glow: rgba(87, 49, 152, 0.42);
  --white: #f5f2fd;
  --text: #f5f2fd;
  --text-sub: rgba(235, 228, 255, 0.75);
  --muted: rgba(235, 228, 255, 0.52);
  --muted2: rgba(235, 228, 255, 0.30);
  --red: #c0392b;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Barlow', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
  --nav-h: 72px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --transition: 0.3s ease;
  --logo-filter: brightness(0) invert(1);
  --nav-scrolled-bg: rgba(8, 5, 15, 0.97);
  --sidebar-bg: #0c0918;
}

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT MODE OVERRIDES
═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f1fc;
    --deep: #e8e2f5;
    --card: #ffffff;
    --card2: #ede8fb;
    --card-hover: #e0d8f5;
    --border: rgba(72, 30, 140, 0.14);
    --border-hover: rgba(72, 30, 140, 0.38);
    --text: #140c2e;
    --text-sub: #2e1a58;
    --muted: rgba(30, 12, 72, 0.62);
    --muted2: rgba(30, 12, 72, 0.42);
    /* Darker purple-lighter so it reads on light backgrounds */
    --purple-lighter: #6b3ec4;
    --purple-dim: rgba(72, 30, 140, 0.12);
    --logo-filter: none;
    --nav-scrolled-bg: rgba(244, 241, 252, 0.97);
    --sidebar-bg: #f4f1fc;
  }
}