/* CSS Custom Properties (Variables) */

:root {
    /* === Typography === */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-family-monospace: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    
    /* Font Weights */
    --font-weight-thin: 100;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Font Sizes - Fluid Typography */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12-14px */
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);        /* 14-16px */
    --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);        /* 16-18px */
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);       /* 18-20px */
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20-24px */
    --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* 24-32px */
    --font-size-3xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);             /* 32-48px */
    --font-size-timer: clamp(2.5rem, 1.5rem + 3vw, 4rem);            /* 40-64px - Much smaller for mobile */
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    
    /* === Spacing System (8px base) === */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* === Responsive Breakpoints === */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* === Border Radius === */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-base: 0.5rem;   /* 8px */
    --radius-md: 0.75rem;    /* 12px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;
    
    /* === Shadows === */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-dramatic: 0 16px 48px rgba(0, 0, 0, 0.15);
    
    /* === Z-Index === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    
    /* === Transitions === */
    --duration-micro: 150ms;
    --duration-standard: 250ms;
    --duration-emphasized: 400ms;
    --duration-slow: 600ms;
    
    --easing-default: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
    
    /* === Progress Ring === */
    --progress-ring-size: clamp(220px, 35vw, 420px);  /* Better desktop sizing: 220-420px */
    --progress-ring-stroke: clamp(12px, 1.5vw, 16px);
    --progress-ring-radius: calc((var(--progress-ring-size) / 2) - var(--progress-ring-stroke));
    --progress-ring-circumference: calc(2 * 3.14159 * var(--progress-ring-radius));
}

/* === Light Theme === */
[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --bg-modal: rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #6c757d;
    --text-tertiary: #adb5bd;
    --text-inverse: #ffffff;
    
    /* Accent Colors */
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
    --accent-tertiary: #f093fb;
    
    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    
    /* Interactive Colors */
    --interactive-primary: var(--accent-primary);
    --interactive-primary-hover: #5a6fd8;
    --interactive-primary-active: #4e63c6;
    
    --interactive-secondary: var(--bg-tertiary);
    --interactive-secondary-hover: #dee2e6;
    --interactive-secondary-active: #ced4da;
    
    /* Border Colors */
    --border-primary: #e9ecef;
    --border-secondary: #dee2e6;
    --border-focus: var(--accent-primary);
    
    /* Progress Colors */
    --progress-bg: var(--bg-tertiary);
    --progress-fill: var(--accent-primary);
    
    /* Button Colors */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-text: var(--text-inverse);
    --btn-primary-hover: var(--interactive-primary-hover);
    
    --btn-secondary-bg: var(--bg-tertiary);
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover: var(--interactive-secondary-hover);
    
    --btn-ghost-bg: transparent;
    --btn-ghost-text: var(--text-secondary);
    --btn-ghost-hover: var(--bg-secondary);
    
    /* Input Colors */
    --input-bg: var(--bg-secondary);
    --input-border: var(--border-secondary);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-tertiary);
    
    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-tertiary) 100%);
    --gradient-success: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger) 0%, #f87171 100%);
}

/* === Dark Theme === */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-overlay: rgba(15, 23, 42, 0.95);
    --bg-modal: rgba(0, 0, 0, 0.8);
    
    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-inverse: #0f172a;
    
    /* Accent Colors */
    --accent-primary: #818cf8;
    --accent-secondary: #a78bfa;
    --accent-tertiary: #c084fc;
    
    /* Semantic Colors */
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;
    
    /* Interactive Colors */
    --interactive-primary: var(--accent-primary);
    --interactive-primary-hover: #9ca3f9;
    --interactive-primary-active: #6366f1;
    
    --interactive-secondary: var(--bg-tertiary);
    --interactive-secondary-hover: #475569;
    --interactive-secondary-active: #64748b;
    
    /* Border Colors */
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-focus: var(--accent-primary);
    
    /* Progress Colors */
    --progress-bg: var(--bg-tertiary);
    --progress-fill: var(--accent-primary);
    
    /* Button Colors */
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-text: var(--text-inverse);
    --btn-primary-hover: var(--interactive-primary-hover);
    
    --btn-secondary-bg: var(--bg-tertiary);
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover: var(--interactive-secondary-hover);
    
    --btn-ghost-bg: transparent;
    --btn-ghost-text: var(--text-secondary);
    --btn-ghost-hover: var(--bg-secondary);
    
    /* Input Colors */
    --input-bg: var(--bg-secondary);
    --input-border: var(--border-secondary);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-tertiary);
    
    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.5);
    
    /* Dark theme specific shadows */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-dramatic: 0 16px 48px rgba(0, 0, 0, 0.6);
    
    /* Gradient Definitions */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-tertiary) 100%);
    --gradient-success: linear-gradient(135deg, var(--success) 0%, #10b981 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning) 0%, #f59e0b 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger) 0%, #ef4444 100%);
}

/* === Auto Theme (system preference) === */
[data-theme="auto"] {
    /* Light theme as default */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-overlay: rgba(255, 255, 255, 0.95);
    --bg-modal: rgba(0, 0, 0, 0.5);
    
    --text-primary: #1a1a1a;
    --text-secondary: #6c757d;
    --text-tertiary: #adb5bd;
    --text-inverse: #ffffff;
    
    --accent-primary: #667eea;
    --accent-secondary: #764ba2;
    --accent-tertiary: #f093fb;
    
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    
    --interactive-primary: var(--accent-primary);
    --interactive-primary-hover: #5a6fd8;
    --interactive-primary-active: #4e63c6;
    
    --interactive-secondary: var(--bg-tertiary);
    --interactive-secondary-hover: #dee2e6;
    --interactive-secondary-active: #ced4da;
    
    --border-primary: #e9ecef;
    --border-secondary: #dee2e6;
    --border-focus: var(--accent-primary);
    
    --progress-bg: var(--bg-tertiary);
    --progress-fill: var(--accent-primary);
    
    --btn-primary-bg: var(--accent-primary);
    --btn-primary-text: var(--text-inverse);
    --btn-primary-hover: var(--interactive-primary-hover);
    
    --btn-secondary-bg: var(--bg-tertiary);
    --btn-secondary-text: var(--text-primary);
    --btn-secondary-hover: var(--interactive-secondary-hover);
    
    --btn-ghost-bg: transparent;
    --btn-ghost-text: var(--text-secondary);
    --btn-ghost-hover: var(--bg-secondary);
    
    --input-bg: var(--bg-secondary);
    --input-border: var(--border-secondary);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-tertiary);
    
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-tertiary) 100%);
    --gradient-success: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger) 0%, #f87171 100%);
}

/* Auto theme dark mode override */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --bg-overlay: rgba(15, 23, 42, 0.95);
        --bg-modal: rgba(0, 0, 0, 0.8);
        
        --text-primary: #f8fafc;
        --text-secondary: #94a3b8;
        --text-tertiary: #64748b;
        --text-inverse: #0f172a;
        
        --accent-primary: #818cf8;
        --accent-secondary: #a78bfa;
        --accent-tertiary: #c084fc;
        
        --success: #34d399;
        --warning: #fbbf24;
        --danger: #f87171;
        --info: #60a5fa;
        
        --interactive-primary: var(--accent-primary);
        --interactive-primary-hover: #9ca3f9;
        --interactive-primary-active: #6366f1;
        
        --interactive-secondary: var(--bg-tertiary);
        --interactive-secondary-hover: #475569;
        --interactive-secondary-active: #64748b;
        
        --border-primary: #334155;
        --border-secondary: #475569;
        --border-focus: var(--accent-primary);
        
        --progress-bg: var(--bg-tertiary);
        --progress-fill: var(--accent-primary);
        
        --btn-primary-bg: var(--accent-primary);
        --btn-primary-text: var(--text-inverse);
        --btn-primary-hover: var(--interactive-primary-hover);
        
        --btn-secondary-bg: var(--bg-tertiary);
        --btn-secondary-text: var(--text-primary);
        --btn-secondary-hover: var(--interactive-secondary-hover);
        
        --btn-ghost-bg: transparent;
        --btn-ghost-text: var(--text-secondary);
        --btn-ghost-hover: var(--bg-secondary);
        
        --input-bg: var(--bg-secondary);
        --input-border: var(--border-secondary);
        --input-text: var(--text-primary);
        --input-placeholder: var(--text-tertiary);
        
        --shadow-color: rgba(0, 0, 0, 0.5);
        
        --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-dramatic: 0 16px 48px rgba(0, 0, 0, 0.6);
        
        --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
        --gradient-secondary: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-tertiary) 100%);
        --gradient-success: linear-gradient(135deg, var(--success) 0%, #10b981 100%);
        --gradient-warning: linear-gradient(135deg, var(--warning) 0%, #f59e0b 100%);
        --gradient-danger: linear-gradient(135deg, var(--danger) 0%, #ef4444 100%);
    }
}