:root {
    /* ============================================
       BEGINNER DARK THEME (Default)
       ============================================ */
    
    /* Background Colors */
    --bg-app: #1a1a1a;
    --bg-glass: rgba(26, 26, 26, 0.7);
    --bg-glass-nav: rgba(22, 18, 24, 0.9); /* Dark with subtle magenta tint matching gradients */
    --bg-glass-hover: rgba(255, 255, 255, 0.08);
    --bg-glass-subtle: rgba(255, 255, 255, 0.03);
    --bg-glass-active: rgba(255, 255, 255, 0.1);
    --bg-input: rgba(0, 0, 0, 0.3);
    --bg-overlay: rgba(20, 20, 20, 0.9);
    --bg-loading-overlay: rgba(20, 20, 20, 0.95);
    
    /* Border Colors */
    --border-glass: rgba(148, 163, 184, 0.15);
    --border-glass-highlight: rgba(203, 213, 225, 0.25);
    
    /* Text Colors */
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-on-accent: #ffffff;
    
    /* Accent Colors */
    --accent-primary: #60a5fa; /* Light Blue */
    --accent-primary-dark: #3b82f6;
    --accent-glow: rgba(96, 165, 250, 0.25);
    --accent-glow-strong: rgba(96, 165, 250, 0.35);
    --accent-glow-subtle: rgba(96, 165, 250, 0.15);
    --accent-primary-bg: rgba(96, 165, 250, 0.1);
    --accent-primary-bg-strong: rgba(96, 165, 250, 0.2);
    
    /* Status Colors */
    --accent-danger: #f87171; /* Light Red */
    --accent-danger-bg: rgba(248, 113, 113, 0.1);
    --accent-danger-bg-strong: rgba(248, 113, 113, 0.2);
    --accent-danger-border: rgba(248, 113, 113, 0.3);
    --accent-danger-glow: rgba(248, 113, 113, 0.25);
    
    --accent-success: #34d399;
    --accent-success-bg: rgba(52, 211, 153, 0.1);
    
    --accent-warning: #fbbf24;
    --accent-warning-bg: rgba(251, 191, 36, 0.1);
    
    /* Background Gradients - Using magenta and black accents (toned down) */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(217, 70, 239, 0.05) 0%, rgba(217, 70, 239, 0.02) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.03) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(217, 70, 239, 0.04) 0%, rgba(217, 70, 239, 0.01) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.02) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(96, 165, 250, 0.25);
    --progress-gradient-mid: rgba(96, 165, 250, 0.5);
    --progress-gradient-end: rgba(96, 165, 250, 0.75);
    --progress-gradient-bg-start: rgba(96, 165, 250, 0.15);
    --progress-gradient-bg-mid: rgba(96, 165, 250, 0.3);
    --progress-gradient-bg-end: rgba(96, 165, 250, 0.15);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(96, 165, 250, 0.25);
    --pulse-glow-strong: rgba(96, 165, 250, 0.35);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.2);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(255, 255, 255, 0.2);
    
    /* Layout */
    --nav-height: 70px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 20px);
    --header-height: 42px; /* Header height: 15px padding top + ~24px content + 15px padding bottom */
    
    /* Border Radius Levels - Default rounded */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}