:root {
  color-scheme: dark;

  /* Colors */
  --bg-base: #06060F;
  --bg-card: #131326;
  --bg-sidebar: #080815;
  --bg-elevated: #1a1a35;
  --accent-violet: #7C3AED;
  --accent-violet-light: #9F67FF;
  --accent-violet-dim: rgba(124, 58, 237, 0.15);
  --accent-cyan: #06B6D4;
  --accent-green: #10B981;
  --accent-orange: #F59E0B;
  --accent-red: #EF4444;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #475569;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);

  /* Surface accents (theme-aware helpers) */
  --hover-row: rgba(255,255,255,0.02);
  --hover-item: rgba(255,255,255,0.06);
  --topbar-bg: rgba(8,8,21,0.85);
  --skeleton-highlight: #22223a;
  --glass-bg: rgba(19,19,38,0.55);
  --glass-border: rgba(255,255,255,0.08);
  --focus-ring: rgba(124,58,237,0.35);

  /* Soft text-on-tint colors (alerts, badges) */
  --red-soft: #fca5a5;
  --green-soft: #6ee7b7;
  --cyan-soft: #67e8f9;
  --orange-soft: #fcd34d;
  --blue-soft: #93c5fd;

  /* Ambient orbs (auth background) */
  --orb-1: rgba(124,58,237,0.16);
  --orb-2: rgba(6,182,212,0.10);
  --orb-3: rgba(159,103,255,0.10);

  /* Brand fills (solid — no gradients) */
  --gradient-primary: #7C3AED;
  --gradient-card: rgba(124,58,237,0.08);
  --gradient-text: #9F67FF;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px rgba(124,58,237,0.3);

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Typography */
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px;
  --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 68px;
  --topbar-height: 64px;
}

/* ── Light theme ─────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  /* Colors */
  --bg-base: #F7F7FC;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FDFDFF;
  --bg-elevated: #EFEFF8;
  --accent-violet: #6D28D9;
  --accent-violet-light: #7C3AED;
  --accent-violet-dim: rgba(109, 40, 217, 0.10);
  --accent-cyan: #0891B2;
  --accent-green: #059669;
  --accent-orange: #D97706;
  --accent-red: #DC2626;
  --text-primary: #14142B;
  --text-secondary: #4A5068;
  --text-muted: #8A8FA6;
  --border: rgba(20,20,43,0.08);
  --border-hover: rgba(20,20,43,0.18);

  /* Surface accents */
  --hover-row: rgba(20,20,43,0.025);
  --hover-item: rgba(20,20,43,0.05);
  --topbar-bg: rgba(247,247,252,0.85);
  --skeleton-highlight: #E3E3F0;
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(20,20,43,0.08);
  --focus-ring: rgba(109,40,217,0.25);

  /* Soft text-on-tint colors */
  --red-soft: #B91C1C;
  --green-soft: #047857;
  --cyan-soft: #0E7490;
  --orange-soft: #B45309;
  --blue-soft: #1D4ED8;

  /* Ambient orbs */
  --orb-1: rgba(124,58,237,0.14);
  --orb-2: rgba(8,145,178,0.10);
  --orb-3: rgba(159,103,255,0.10);

  /* Brand fills (solid — no gradients) */
  --gradient-primary: #6D28D9;
  --gradient-card: rgba(109,40,217,0.06);
  --gradient-text: #6D28D9;

  /* Shadows (softened for light surfaces) */
  --shadow-sm: 0 1px 2px rgba(20,20,43,0.06);
  --shadow-md: 0 4px 16px rgba(20,20,43,0.08);
  --shadow-lg: 0 8px 32px rgba(20,20,43,0.12);
  --shadow-glow: 0 0 20px rgba(109,40,217,0.18);
}