:root {
  /* Modern dark gradient theme */
  --bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #10b981;
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --secondary: #f59e0b;
  --card: rgba(30, 41, 59, 0.8);
  --border: rgba(148, 163, 184, 0.1);
  --accent-glow: rgba(16, 185, 129, 0.3);
  --glass-bg: rgba(15, 23, 42, 0.6);
  
  /* Spacing */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Light theme option */
[data-theme="light"] {
  --bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --text: #0f172a;
  --muted: #475569;
  --accent: #10b981;
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --secondary: #f59e0b;
  --card: rgba(255, 255, 255, 0.9);
  --border: rgba(15, 23, 42, 0.1);
  --accent-glow: rgba(16, 185, 129, 0.2);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Dark theme (default) */
[data-theme="dark"] {
  --bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #10b981;
  --primary: #6366f1;
  --primary-light: #818cf8;
  --primary-dark: #4f46e5;
  --secondary: #f59e0b;
  --card: rgba(30, 41, 59, 0.8);
  --border: rgba(148, 163, 184, 0.1);
  --accent-glow: rgba(16, 185, 129, 0.3);
  --glass-bg: rgba(15, 23, 42, 0.6);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
}