/* ==========================================================================
   Evexa design tokens
   Brand: violet → lilac gradient on deep aubergine. Sidebar stays dark in
   both themes; content surfaces switch.
   ========================================================================== */

:root {
  /* Brand ramp */
  --violet-950: #12081f;
  --violet-900: #1c0d38;
  --violet-800: #2e1065;
  --violet-700: #6d28d9;
  --violet-600: #7c3aed;
  --violet-500: #8b5cf6;
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;
  --violet-200: #ddd6fe;
  --grad-brand: linear-gradient(135deg, #7c3aed 0%, #9f5cf7 55%, #c9a4f9 100%);
  --grad-sidebar: linear-gradient(180deg, #230f45 0%, #170a2d 45%, #10071f 100%);

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Radius / spacing / motion */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 520ms;

  --sb-w: 248px;
  --sb-w-collapsed: 76px;
  --topbar-h: 68px;
}

/* ---------- Dark (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0716;
  --bg-glow: radial-gradient(1200px 600px at 85% -10%, rgba(124, 58, 237, .16), transparent 60%),
             radial-gradient(900px 500px at 10% 110%, rgba(168, 85, 247, .08), transparent 60%);
  --surface: #150d24;
  --surface-2: #1b122e;
  --surface-3: #22173a;
  --surface-hover: #21163a;
  --border: #291d42;
  --border-strong: #3b2b5e;
  --text: #f4f0fc;
  --text-2: #b9aed3;
  --text-3: #7f7399;
  --primary: #8b5cf6;
  --primary-strong: #a78bfa;
  --primary-soft: rgba(139, 92, 246, .16);
  --primary-ring: rgba(139, 92, 246, .45);
  --on-primary: #ffffff;

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, .14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, .14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, .14);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, .14);

  /* Chart series (fixed order) */
  --c1: #a78bfa;
  --c2: #2dd4bf;
  --c3: #fbbf24;
  --c4: #f472b6;
  --c5: #60a5fa;
  --c6: #94a3b8;
  --grid: rgba(185, 174, 211, .10);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 8px 24px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03);
  --card-sheen: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%);
  --scrim: rgba(6, 3, 12, .62);
}

/* ---------- Light ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f4fb;
  --bg-glow: radial-gradient(1200px 600px at 85% -10%, rgba(124, 58, 237, .07), transparent 60%);
  --surface: #ffffff;
  --surface-2: #faf8ff;
  --surface-3: #f2eefb;
  --surface-hover: #f5f1fd;
  --border: #ebe6f4;
  --border-strong: #d9d0ea;
  --text: #1a1230;
  --text-2: #5a5073;
  --text-3: #958bab;
  --primary: #7c3aed;
  --primary-strong: #6d28d9;
  --primary-soft: rgba(124, 58, 237, .09);
  --primary-ring: rgba(124, 58, 237, .35);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, .10);
  --warning: #d97706;
  --warning-soft: rgba(217, 119, 6, .11);
  --danger: #e11d48;
  --danger-soft: rgba(225, 29, 72, .09);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, .09);

  --c1: #7c3aed;
  --c2: #0d9488;
  --c3: #d97706;
  --c4: #db2777;
  --c5: #2563eb;
  --c6: #64748b;
  --grid: rgba(90, 80, 115, .10);

  --shadow-sm: 0 1px 2px rgba(40, 20, 80, .06);
  --shadow: 0 1px 2px rgba(40, 20, 80, .04), 0 8px 24px -12px rgba(60, 30, 120, .14);
  --shadow-lg: 0 24px 60px -16px rgba(50, 20, 110, .28);
  --card-sheen: none;
  --scrim: rgba(26, 18, 48, .38);
}