/* CSS Variables - Design System Foundation */

:root {
  /* Spacing Scale (8px base) */
  --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;
  --space-20: 80px;

  /* Typography Scale */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: 32px;
  --font-3xl: 48px;
  --font-4xl: 64px;

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Border Radius - Premium Curves */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Shadows - Premium Depth */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.16);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 32px rgba(77,182,172,0.4);
  --shadow-glow-accent: 0 0 40px rgba(255,107,53,0.5);
  --shadow-inner: inset 0 2px 8px rgba(0,0,0,0.1);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-bg-active: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-blur: blur(20px);
  --glass-blur-heavy: blur(40px);

  /* Transitions */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Breakpoints (for JS usage) */
  --mobile: 375px;
  --tablet: 768px;
  --desktop: 1024px;
  --large: 1440px;
}

/* Dark Theme (Default) */
.theme-dark {
  --color-primary-bg: #0f0f23;
  --color-secondary-bg: #1a1a2e;
  --color-card-bg: rgba(26, 26, 46, 0.8);
  --color-accent-primary: #00d4aa;
  --color-accent-secondary: #ec4899;
  --color-accent-tertiary: #ff6b35;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B0B0B0;
  --color-text-muted: #757575;
  --color-success: #66BB6A;
  --color-warning: #FFB74D;
  --color-error: #EF5350;
  --color-border: #404040;
  --color-overlay: rgba(0,0,0,0.5);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ec4899 50%, #00d4aa 100%);
  --gradient-secondary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --gradient-lotus: linear-gradient(135deg, #ff6b35 0%, #ec4899 30%, #8b5cf6 60%, #00d4aa 100%);
  --gradient-progress: linear-gradient(90deg, #00d4aa 0%, #ec4899 50%, #ff6b35 100%);
  --gradient-success: linear-gradient(135deg, #66BB6A 0%, #81C784 100%);
  --gradient-glow: radial-gradient(circle, rgba(0, 212, 170, 0.3) 0%, transparent 70%);
  
  /* Theme-specific nav backgrounds */
  --nav-bg: rgba(15, 15, 35, 0.85);
  --nav-border: rgba(255, 255, 255, 0.1);
}

/* Saffron Theme */
.theme-saffron {
  --color-primary-bg: #FFF8E1;
  --color-secondary-bg: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-accent-primary: #FF9800;
  --color-accent-secondary: #FFB74D;
  --color-accent-tertiary: #FFCC02;
  --color-text-primary: #3E2723;
  --color-text-secondary: #5D4037;
  --color-text-muted: #8D6E63;
  --color-success: #689F38;
  --color-warning: #F57C00;
  --color-error: #D32F2F;
  --color-border: #E0E0E0;
  --color-overlay: rgba(255,152,0,0.1);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
  --gradient-secondary: linear-gradient(135deg, #FFF8E1 0%, #FFFFFF 100%);
  --gradient-success: linear-gradient(135deg, #689F38 0%, #8BC34A 100%);
  --gradient-glow: radial-gradient(circle, rgba(255,152,0,0.2) 0%, transparent 70%);
  
  /* Theme-specific nav backgrounds */
  --nav-bg: rgba(255, 248, 225, 0.95);
  --nav-border: rgba(255, 152, 0, 0.15);
}

/* Pink Theme */
.theme-pink {
  --color-primary-bg: #FCE4EC;
  --color-secondary-bg: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-accent-primary: #E91E63;
  --color-accent-secondary: #F48FB1;
  --color-accent-tertiary: #F8BBD9;
  --color-text-primary: #880E4F;
  --color-text-secondary: #AD1457;
  --color-text-muted: #C2185B;
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-border: #F3E5F5;
  --color-overlay: rgba(233,30,99,0.1);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #E91E63 0%, #F48FB1 100%);
  --gradient-secondary: linear-gradient(135deg, #FCE4EC 0%, #FFFFFF 100%);
  --gradient-success: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  --gradient-glow: radial-gradient(circle, rgba(233,30,99,0.2) 0%, transparent 70%);
  
  /* Theme-specific nav backgrounds */
  --nav-bg: rgba(252, 228, 236, 0.95);
  --nav-border: rgba(233, 30, 99, 0.15);
}

/* White Theme */
.theme-white {
  --color-primary-bg: #FAFAFA;
  --color-secondary-bg: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-accent-primary: #4DB6AC;
  --color-accent-secondary: #80CBC4;
  --color-accent-tertiary: #B2DFDB;
  --color-text-primary: #212121;
  --color-text-secondary: #757575;
  --color-text-muted: #9E9E9E;
  --color-success: #4CAF50;
  --color-warning: #FF9800;
  --color-error: #F44336;
  --color-border: #E0E0E0;
  --color-overlay: rgba(0,0,0,0.1);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #4DB6AC 0%, #80CBC4 100%);
  --gradient-secondary: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 100%);
  --gradient-success: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  --gradient-glow: radial-gradient(circle, rgba(77,182,172,0.2) 0%, transparent 70%);
  
  /* Theme-specific nav backgrounds */
  --nav-bg: rgba(250, 250, 250, 0.95);
  --nav-border: rgba(77, 182, 172, 0.15);
}

/* Theme-specific adjustments */
.theme-dark .shadow-element {
  box-shadow: var(--shadow-md);
}

.theme-saffron .shadow-element,
.theme-pink .shadow-element,
.theme-white .shadow-element {
  box-shadow: var(--shadow-sm);
}

/* Accent color variations for different themes */
.theme-dark .accent-bg {
  background: var(--gradient-primary);
}

.theme-saffron .accent-bg {
  background: var(--gradient-primary);
}

.theme-pink .accent-bg {
  background: var(--gradient-primary);
}

.theme-white .accent-bg {
  background: var(--gradient-primary);
}

/* Progress ring colors */
.theme-dark .progress-ring-progress {
  stroke: var(--color-accent-primary);
}

.theme-saffron .progress-ring-progress {
  stroke: var(--color-accent-primary);
}

.theme-pink .progress-ring-progress {
  stroke: var(--color-accent-primary);
}

.theme-white .progress-ring-progress {
  stroke: var(--color-accent-primary);
}

/* Responsive font sizes */
@media (max-width: 768px) {
  :root {
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-lg: 17px;
    --font-xl: 22px;
    --font-2xl: 28px;
    --font-3xl: 40px;
    --font-4xl: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --font-xs: 13px;
    --font-sm: 15px;
    --font-base: 17px;
    --font-lg: 19px;
    --font-xl: 26px;
    --font-2xl: 36px;
    --font-3xl: 52px;
    --font-4xl: 72px;
  }
}