/* ============================================
   NOTHING THEME (Ultra Minimalist - Unintrusive)
   ============================================ */
body[data-theme="nothing"] {
    /* Remove all border radii for sharp, geometric look */
    border-radius: 0 !important;
    
    /* Background Colors - Pale gray and white */
    --bg-app: #f5f5f5; /* Pale gray */
    --bg-glass: rgba(255, 255, 255, 0.98); /* White */
    --bg-glass-nav: rgba(255, 255, 255, 0.99); /* White for nav */
    --bg-glass-hover: rgba(0, 0, 0, 0.05); /* Subtle dark hover */
    --bg-glass-subtle: rgba(0, 0, 0, 0.02); /* Very subtle */
    --bg-glass-active: rgba(0, 0, 0, 0.08); /* Dark active state */
    --bg-input: rgba(255, 255, 255, 0.98); /* White input */
    --bg-overlay: rgba(250, 250, 250, 0.98); /* Pale gray overlay */
    --bg-loading-overlay: rgba(255, 255, 255, 0.99); /* White for loading */
    
    /* Border Colors - Dark gray and black for high contrast */
    --border-glass: rgba(0, 0, 0, 0.4); /* Dark gray border */
    --border-glass-highlight: rgba(0, 0, 0, 0.6); /* Darker border for emphasis */
    
    /* Text Colors - Dark gray and black for high contrast */
    --text-main: #000000; /* Pure black for maximum contrast */
    --text-muted: #1a1a1a; /* Very dark gray */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Monochrome black/gray */
    --accent-primary: #000000; /* Pure black - monochrome */
    --accent-primary-dark: #1a1a1a;
    --accent-glow: rgba(0, 0, 0, 0.1);
    --accent-glow-strong: rgba(0, 0, 0, 0.15);
    --accent-glow-subtle: rgba(0, 0, 0, 0.05);
    --accent-primary-bg: rgba(0, 0, 0, 0.05);
    --accent-primary-bg-strong: rgba(0, 0, 0, 0.1);
    
    /* Status Colors - Keep good/bad colors (green and red) */
    --accent-danger: #dc2626; /* Clear red for danger */
    --accent-danger-bg: rgba(220, 38, 38, 0.08);
    --accent-danger-bg-strong: rgba(220, 38, 38, 0.15);
    --accent-danger-border: rgba(220, 38, 38, 0.2);
    --accent-danger-glow: rgba(220, 38, 38, 0.15);
    
    --accent-success: #16a34a; /* Clear green for success */
    --accent-success-bg: rgba(22, 163, 74, 0.08);
    
    --accent-warning: #666666; /* Monochrome gray for warning */
    --accent-warning-bg: rgba(102, 102, 102, 0.05);
    
    /* Background Gradients - Remove/minimize */
    --bg-gradient-primary: none;
    --bg-gradient-secondary: none;
    --bg-gradient-tertiary: none;
    --bg-gradient-quaternary: none;
    
    /* Long Press Progress Gradients - Monochrome */
    --progress-gradient-start: rgba(0, 0, 0, 0.15);
    --progress-gradient-mid: rgba(0, 0, 0, 0.3);
    --progress-gradient-end: rgba(0, 0, 0, 0.5);
    --progress-gradient-bg-start: rgba(0, 0, 0, 0.05);
    --progress-gradient-bg-mid: rgba(0, 0, 0, 0.1);
    --progress-gradient-bg-end: rgba(0, 0, 0, 0.05);
    
    /* Pulse Glow Animation Colors - Monochrome */
    --pulse-glow-subtle: rgba(0, 0, 0, 0.08);
    --pulse-glow-strong: rgba(0, 0, 0, 0.12);
    
    /* Effects - Stronger shadows for high contrast */
    --shadow-glass: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.2);
    --blur-amount: 8px;
    
    /* Spinner Colors - Monochrome */
    --spinner-border: rgba(0, 0, 0, 0.15);
}

/* Remove all border radii for Nothing theme */
body[data-theme="nothing"] {
    --radius-sm: 0 !important;
    --radius-md: 0 !important;
    --radius-lg: 0 !important;
    --radius-xl: 0 !important;
}

body[data-theme="nothing"] * {
    border-radius: 0 !important;
}

/* ============================================
   BEGINNER LIGHT THEME (Cool Blue)
   ============================================ */
body[data-theme="light"] {
    /* Border Radius - Slightly rounded */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    
    /* Background Colors - Crisp white with cool blue undertones */
    --bg-app: #f8fafc;
    --bg-glass: rgba(248, 250, 252, 0.85);
    --bg-glass-nav: rgba(240, 245, 255, 0.95); /* Subtle blue tint matching gradients */
    --bg-glass-hover: rgba(59, 130, 246, 0.1);
    --bg-glass-subtle: rgba(59, 130, 246, 0.03);
    --bg-glass-active: rgba(59, 130, 246, 0.15);
    --bg-input: rgba(241, 245, 249, 0.9);
    --bg-overlay: rgba(248, 250, 252, 0.95);
    --bg-loading-overlay: rgba(255, 255, 255, 0.98);
    
    /* Border Colors - Cool slate blue */
    --border-glass: rgba(100, 116, 139, 0.25);
    --border-glass-highlight: rgba(59, 130, 246, 0.35);
    
    /* Text Colors - Deep slate for excellent contrast */
    --text-main: #0f172a; /* Very dark slate - high contrast */
    --text-muted: #475569; /* Medium slate */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Vibrant blue */
    --accent-primary: #2563eb; /* Stronger blue for better contrast */
    --accent-primary-dark: #1e40af;
    --accent-glow: rgba(37, 99, 235, 0.25);
    --accent-glow-strong: rgba(37, 99, 235, 0.35);
    --accent-glow-subtle: rgba(37, 99, 235, 0.15);
    --accent-primary-bg: rgba(37, 99, 235, 0.12);
    --accent-primary-bg-strong: rgba(37, 99, 235, 0.22);
    
    /* Status Colors */
    --accent-danger: #ef4444; /* Red */
    --accent-danger-bg: rgba(239, 68, 68, 0.1);
    --accent-danger-bg-strong: rgba(239, 68, 68, 0.2);
    --accent-danger-border: rgba(239, 68, 68, 0.3);
    --accent-danger-glow: rgba(239, 68, 68, 0.25);
    
    --accent-success: #10b981;
    --accent-success-bg: rgba(16, 185, 129, 0.1);
    
    --accent-warning: #f59e0b;
    --accent-warning-bg: rgba(245, 158, 11, 0.1);
    
    /* Background Gradients - Cool blue gradients */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0.06) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(100, 116, 139, 0.14) 0%, rgba(100, 116, 139, 0.05) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(100, 116, 139, 0.12) 0%, rgba(100, 116, 139, 0.04) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(37, 99, 235, 0.3);
    --progress-gradient-mid: rgba(37, 99, 235, 0.55);
    --progress-gradient-end: rgba(37, 99, 235, 0.8);
    --progress-gradient-bg-start: rgba(37, 99, 235, 0.15);
    --progress-gradient-bg-mid: rgba(37, 99, 235, 0.3);
    --progress-gradient-bg-end: rgba(37, 99, 235, 0.15);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(37, 99, 235, 0.25);
    --pulse-glow-strong: rgba(37, 99, 235, 0.35);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.08);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(0, 0, 0, 0.15);
}

/* ============================================
   BEACH LIGHT THEME (Pale Cream, White, Teal & Sand)
   ============================================ */
body[data-theme="beach-light"] {
    /* Border Radius - Soft rounded */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    
    /* Background Colors - Pale cream and white */
    --bg-app: #fefaf6; /* Pale cream */
    --bg-glass: rgba(255, 255, 255, 0.85); /* Clean white */
    --bg-glass-nav: rgba(240, 252, 250, 0.95); /* Cream with subtle teal tint matching gradients */
    --bg-glass-hover: rgba(20, 184, 166, 0.1); /* Teal hover */
    --bg-glass-subtle: rgba(214, 188, 165, 0.05); /* Sand subtle */
    --bg-glass-active: rgba(20, 184, 166, 0.15); /* Aqua active */
    --bg-input: rgba(255, 255, 255, 0.9); /* Clean white input */
    --bg-overlay: rgba(254, 250, 246, 0.95); /* Pale cream overlay */
    --bg-loading-overlay: rgba(255, 255, 255, 0.98); /* White loading */
    
    /* Border Colors - Sand and teal */
    --border-glass: rgba(214, 188, 165, 0.25); /* Sand border */
    --border-glass-highlight: rgba(20, 184, 166, 0.35); /* Teal highlight */
    
    /* Text Colors - Dark semi-desaturated browns and blues */
    --text-main: #5c4a3a; /* Dark semi-desaturated brown */
    --text-muted: #6b5d4f; /* Medium semi-desaturated brown */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Teal/aqua */
    --accent-primary: #14b8a6; /* Vibrant teal */
    --accent-primary-dark: #0d9488;
    --accent-glow: rgba(20, 184, 166, 0.25);
    --accent-glow-strong: rgba(20, 184, 166, 0.35);
    --accent-glow-subtle: rgba(20, 184, 166, 0.15);
    --accent-primary-bg: rgba(20, 184, 166, 0.12);
    --accent-primary-bg-strong: rgba(20, 184, 166, 0.22);
    
    /* Status Colors */
    --accent-danger: #c2410c; /* Semi-desaturated red-orange */
    --accent-danger-bg: rgba(194, 65, 12, 0.1);
    --accent-danger-bg-strong: rgba(194, 65, 12, 0.2);
    --accent-danger-border: rgba(194, 65, 12, 0.3);
    --accent-danger-glow: rgba(194, 65, 12, 0.25);
    
    --accent-success: #059669; /* Teal green */
    --accent-success-bg: rgba(5, 150, 105, 0.12);
    
    --accent-warning: #d97706; /* Warm sand orange */
    --accent-warning-bg: rgba(217, 119, 6, 0.12);
    
    /* Background Gradients - Teal and sand tones */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.05) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(214, 188, 165, 0.12) 0%, rgba(214, 188, 165, 0.04) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.03) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(214, 188, 165, 0.1) 0%, rgba(214, 188, 165, 0.03) 25%, transparent 40%);
    
    /* Long Press Progress Gradients - Teal */
    --progress-gradient-start: rgba(20, 184, 166, 0.3);
    --progress-gradient-mid: rgba(20, 184, 166, 0.55);
    --progress-gradient-end: rgba(20, 184, 166, 0.8);
    --progress-gradient-bg-start: rgba(20, 184, 166, 0.15);
    --progress-gradient-bg-mid: rgba(20, 184, 166, 0.3);
    --progress-gradient-bg-end: rgba(20, 184, 166, 0.15);
    
    /* Pulse Glow Animation Colors - Teal */
    --pulse-glow-subtle: rgba(20, 184, 166, 0.25);
    --pulse-glow-strong: rgba(20, 184, 166, 0.35);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(92, 74, 58, 0.08);
    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.15);
    --blur-amount: 12px;
    
    /* Spinner Colors - Teal */
    --spinner-border: rgba(20, 184, 166, 0.3);
}

/* Background image overlay for beach-light theme */
body[data-theme="beach-light"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/beach.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* Loading overlay background for beach-light theme */
body[data-theme="beach-light"] .app-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/beach.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
}

/* ============================================
   TERMINAL DARK THEME
   ============================================ */
body[data-theme="terminal-dark"] {
    /* Border Radius - Sharp (terminal aesthetic) */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    
    /* Background Colors */
    --bg-app: #0a0a0a;
    --bg-glass: rgba(10, 10, 10, 0.9);
    --bg-glass-nav: rgba(5, 20, 8, 0.95); /* Subtle dark green tint matching gradients */
    --bg-glass-hover: rgba(0, 255, 65, 0.2);
    --bg-glass-subtle: rgba(0, 255, 65, 0.08);
    --bg-glass-active: rgba(0, 255, 65, 0.25);
    --bg-input: rgba(0, 0, 0, 0.5);
    --bg-overlay: rgba(0, 0, 0, 0.95);
    --bg-loading-overlay: rgba(0, 0, 0, 0.98);
    
    /* Border Colors */
    --border-glass: rgba(0, 255, 65, 0.4);
    --border-glass-highlight: rgba(0, 255, 65, 0.6);
    
    /* Text Colors */
    --text-main: #00ff41; /* Bright terminal green */
    --text-muted: #00cc33;
    --text-on-accent: #000000;
    
    /* Accent Colors - Bright green for terminal aesthetic with better contrast */
    --accent-primary: #00ff41; /* Bright terminal green - high contrast */
    --accent-primary-dark: #00cc33;
    --accent-glow: rgba(0, 255, 65, 0.5);
    --accent-glow-strong: rgba(0, 255, 65, 0.6);
    --accent-glow-subtle: rgba(0, 255, 65, 0.4);
    --accent-primary-bg: rgba(0, 255, 65, 0.2);
    --accent-primary-bg-strong: rgba(0, 255, 65, 0.3);
    
    /* Status Colors */
    --accent-danger: #ef4444; /* Red */
    --accent-danger-bg: rgba(239, 68, 68, 0.15);
    --accent-danger-bg-strong: rgba(239, 68, 68, 0.25);
    --accent-danger-border: rgba(239, 68, 68, 0.4);
    --accent-danger-glow: rgba(239, 68, 68, 0.4);
    
    --accent-success: #22c55e; /* Green */
    --accent-success-bg: rgba(34, 197, 94, 0.15);
    
    --accent-warning: #22c55e;
    --accent-warning-bg: rgba(34, 197, 94, 0.15);
    
    /* Background Gradients - Black and dark dark green */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(0, 0, 0, 0.4) 0%, rgba(10, 61, 20, 0.25) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(10, 61, 20, 0.3) 0%, rgba(0, 0, 0, 0.35) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(0, 0, 0, 0.3) 0%, rgba(10, 61, 20, 0.15) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(10, 61, 20, 0.25) 0%, rgba(0, 0, 0, 0.3) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(34, 197, 94, 0.4);
    --progress-gradient-mid: rgba(34, 197, 94, 0.6);
    --progress-gradient-end: rgba(34, 197, 94, 0.8);
    --progress-gradient-bg-start: rgba(34, 197, 94, 0.2);
    --progress-gradient-bg-mid: rgba(34, 197, 94, 0.4);
    --progress-gradient-bg-end: rgba(34, 197, 94, 0.2);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(34, 197, 94, 0.4);
    --pulse-glow-strong: rgba(34, 197, 94, 0.5);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(34, 197, 94, 0.2);
    --shadow-active: 0 2px 8px rgba(34, 197, 94, 0.3);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(34, 197, 94, 0.3);
}

/* ============================================
   BARE BONES LIGHT THEME (Bone Colors & Warm Grays)
   ============================================ */
body[data-theme="bare-bones-light"] {
    /* Border Radius - Very slightly rounded */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    
    /* Background Colors - Bone color */
    --bg-app: #f5f1e8; /* Warm bone color */
    --bg-glass: rgba(250, 247, 240, 0.95); /* Slightly lighter bone */
    --bg-glass-nav: rgba(252, 245, 243, 0.98); /* Bone with subtle red tint matching gradients */
    --bg-glass-hover: rgba(184, 92, 87, 0.08); /* Subtle red hover */
    --bg-glass-subtle: rgba(0, 0, 0, 0.02);
    --bg-glass-active: rgba(184, 92, 87, 0.12); /* Subtle red active */
    --bg-input: rgba(250, 247, 240, 0.9); /* Bone input */
    --bg-overlay: rgba(245, 241, 232, 0.97); /* Bone overlay */
    --bg-loading-overlay: rgba(252, 250, 245, 0.99); /* Lightest bone */
    
    /* Border Colors - Warm gray borders */
    --border-glass: rgba(90, 85, 80, 0.15); /* Warm gray border */
    --border-glass-highlight: rgba(70, 65, 60, 0.25); /* Darker warm gray */
    
    /* Text Colors - Dark warm grays */
    --text-main: #3a3530; /* Dark warm gray */
    --text-muted: #5a5550; /* Medium warm gray */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Subtle red */
    --accent-primary: #b85c57; /* Subtle, muted red */
    --accent-primary-dark: #a04a45;
    --accent-glow: rgba(184, 92, 87, 0.2);
    --accent-glow-strong: rgba(184, 92, 87, 0.3);
    --accent-glow-subtle: rgba(184, 92, 87, 0.15);
    --accent-primary-bg: rgba(184, 92, 87, 0.1);
    --accent-primary-bg-strong: rgba(184, 92, 87, 0.18);
    
    /* Status Colors */
    --accent-danger: #b85c57; /* Subtle red for danger */
    --accent-danger-bg: rgba(184, 92, 87, 0.12);
    --accent-danger-bg-strong: rgba(184, 92, 87, 0.2);
    --accent-danger-border: rgba(184, 92, 87, 0.3);
    --accent-danger-glow: rgba(184, 92, 87, 0.25);
    
    --accent-success: #6b7a5a; /* Warm gray-green */
    --accent-success-bg: rgba(107, 122, 90, 0.1);
    
    --accent-warning: #8b7a6a; /* Warm gray-brown */
    --accent-warning-bg: rgba(139, 122, 106, 0.1);
    
    /* Background Gradients - Subtle warm tones */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(90, 85, 80, 0.06) 0%, rgba(90, 85, 80, 0.02) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(184, 92, 87, 0.05) 0%, rgba(184, 92, 87, 0.02) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(90, 85, 80, 0.04) 0%, rgba(90, 85, 80, 0.01) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(184, 92, 87, 0.04) 0%, rgba(184, 92, 87, 0.01) 25%, transparent 40%);
    
    /* Long Press Progress Gradients - Subtle red */
    --progress-gradient-start: rgba(184, 92, 87, 0.2);
    --progress-gradient-mid: rgba(184, 92, 87, 0.4);
    --progress-gradient-end: rgba(184, 92, 87, 0.6);
    --progress-gradient-bg-start: rgba(184, 92, 87, 0.1);
    --progress-gradient-bg-mid: rgba(184, 92, 87, 0.2);
    --progress-gradient-bg-end: rgba(184, 92, 87, 0.1);
    
    /* Pulse Glow Animation Colors - Subtle red */
    --pulse-glow-subtle: rgba(184, 92, 87, 0.15);
    --pulse-glow-strong: rgba(184, 92, 87, 0.25);
    
    /* Effects */
    --shadow-glass: 0 4px 16px 0 rgba(90, 85, 80, 0.08);
    --shadow-active: 0 1px 4px rgba(90, 85, 80, 0.1);
    --blur-amount: 8px;
    
    /* Spinner Colors - Subtle red */
    --spinner-border: rgba(184, 92, 87, 0.25);
}

/* ============================================
   PURPLED DARK THEME (Purple & Teal)
   ============================================ */
body[data-theme="purpled-dark"] {
    /* Border Radius - Smooth rounded */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    
    /* Background Colors - Rich dark purple */
    --bg-app: #1a1625; /* Deeper, richer purple */
    --bg-glass: rgba(46, 43, 80, 0.75);
    --bg-glass-nav: rgba(28, 24, 42, 0.92); /* Purple with subtle teal tint matching gradients */
    --bg-glass-hover: rgba(20, 184, 166, 0.18);
    --bg-glass-subtle: rgba(139, 92, 246, 0.1);
    --bg-glass-active: rgba(139, 92, 246, 0.25);
    --bg-input: rgba(30, 27, 46, 0.6);
    --bg-overlay: rgba(26, 22, 37, 0.92);
    --bg-loading-overlay: rgba(20, 15, 30, 0.97);
    
    /* Border Colors - Vibrant purple */
    --border-glass: rgba(167, 139, 250, 0.3);
    --border-glass-highlight: rgba(196, 181, 253, 0.45);
    
    /* Text Colors - Bright lavender for contrast */
    --text-main: #f3e8ff; /* Very light lavender - high contrast */
    --text-muted: #c084fc; /* Medium purple */
    --text-on-accent: #1a1625;
    
    /* Accent Colors - Vibrant teal on purple */
    --accent-primary: #06b6d4; /* Bright cyan */
    --accent-primary-dark: #0891b2;
    --accent-glow: rgba(6, 182, 212, 0.35);
    --accent-glow-strong: rgba(6, 182, 212, 0.45);
    --accent-glow-subtle: rgba(6, 182, 212, 0.25);
    --accent-primary-bg: rgba(6, 182, 212, 0.18);
    --accent-primary-bg-strong: rgba(6, 182, 212, 0.28);
    
    /* Status Colors */
    --accent-danger: #d946ef; /* Magenta */
    --accent-danger-bg: rgba(217, 70, 239, 0.15);
    --accent-danger-bg-strong: rgba(217, 70, 239, 0.25);
    --accent-danger-border: rgba(217, 70, 239, 0.35);
    --accent-danger-glow: rgba(217, 70, 239, 0.3);
    
    --accent-success: #14b8a6; /* Teal */
    --accent-success-bg: rgba(20, 184, 166, 0.15);
    
    --accent-warning: #eab308; /* Yellow */
    --accent-warning-bg: rgba(234, 179, 8, 0.15);
    
    /* Background Gradients - Using theme accent colors with higher opacity */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.08) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(20, 184, 166, 0.2) 0%, rgba(20, 184, 166, 0.07) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(139, 92, 246, 0.14) 0%, rgba(139, 92, 246, 0.05) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0.05) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(20, 184, 166, 0.3);
    --progress-gradient-mid: rgba(20, 184, 166, 0.5);
    --progress-gradient-end: rgba(20, 184, 166, 0.7);
    --progress-gradient-bg-start: rgba(20, 184, 166, 0.15);
    --progress-gradient-bg-mid: rgba(20, 184, 166, 0.3);
    --progress-gradient-bg-end: rgba(20, 184, 166, 0.15);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(20, 184, 166, 0.3);
    --pulse-glow-strong: rgba(20, 184, 166, 0.4);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(139, 92, 246, 0.2);
    --shadow-active: 0 2px 8px rgba(139, 92, 246, 0.3);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(139, 92, 246, 0.3);
}

/* Background image overlay for purpled-dark theme */
body[data-theme="purpled-dark"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/purple-city.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* Loading overlay background for purpled-dark theme */
body[data-theme="purpled-dark"] .app-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/purple-city.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
}

/* ============================================
   GHOST LIGHT THEME (Ultra Minimal Gray)
   ============================================ */
body[data-theme="ghost-light"] {
    /* Border Radius - Subtle rounded */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Background Colors - Darker grays */
    --bg-app: #e8e8e8; /* Darker gray */
    --bg-glass: rgba(232, 232, 232, 0.85);
    --bg-glass-nav: rgba(235, 232, 238, 0.95); /* Gray with subtle purple tint matching gradients */
    --bg-glass-hover: rgba(0, 0, 0, 0.05);
    --bg-glass-subtle: rgba(0, 0, 0, 0.02);
    --bg-glass-active: rgba(0, 0, 0, 0.08);
    --bg-input: rgba(235, 235, 235, 0.9);
    --bg-overlay: rgba(232, 232, 232, 0.95);
    --bg-loading-overlay: rgba(240, 240, 240, 0.98);
    
    /* Border Colors - Darker gray borders */
    --border-glass: rgba(140, 140, 140, 0.2);
    --border-glass-highlight: rgba(100, 100, 100, 0.3);
    
    /* Text Colors - Darker grays for better contrast */
    --text-main: #2a2a2a; /* Darker gray */
    --text-muted: #5a5a5a; /* Medium-dark gray */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Darker, less saturated purple */
    --accent-primary: #5a4a6b; /* Darker, less saturated purple */
    --accent-primary-dark: #4a3a5b;
    --accent-glow: rgba(90, 74, 107, 0.2);
    --accent-glow-strong: rgba(90, 74, 107, 0.3);
    --accent-glow-subtle: rgba(90, 74, 107, 0.15);
    --accent-primary-bg: rgba(90, 74, 107, 0.1);
    --accent-primary-bg-strong: rgba(90, 74, 107, 0.2);
    
    /* Status Colors */
    --accent-danger: #8b6b6b; /* Darker gray-red */
    --accent-danger-bg: rgba(139, 107, 107, 0.1);
    --accent-danger-bg-strong: rgba(139, 107, 107, 0.18);
    --accent-danger-border: rgba(139, 107, 107, 0.25);
    --accent-danger-glow: rgba(139, 107, 107, 0.15);
    
    --accent-success: #6b8b6b; /* Darker gray-green */
    --accent-success-bg: rgba(107, 139, 107, 0.1);
    
    --accent-warning: #8b8b6b; /* Darker gray-yellow */
    --accent-warning-bg: rgba(139, 139, 107, 0.1);
    
    /* Background Gradients - Using darker grays */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(140, 140, 140, 0.1) 0%, rgba(140, 140, 140, 0.03) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(140, 140, 140, 0.1) 0%, rgba(140, 140, 140, 0.03) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(140, 140, 140, 0.08) 0%, rgba(140, 140, 140, 0.02) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(140, 140, 140, 0.08) 0%, rgba(140, 140, 140, 0.02) 25%, transparent 40%);
    
    /* Long Press Progress Gradients - Darker purple */
    --progress-gradient-start: rgba(90, 74, 107, 0.2);
    --progress-gradient-mid: rgba(90, 74, 107, 0.4);
    --progress-gradient-end: rgba(90, 74, 107, 0.6);
    --progress-gradient-bg-start: rgba(90, 74, 107, 0.1);
    --progress-gradient-bg-mid: rgba(90, 74, 107, 0.2);
    --progress-gradient-bg-end: rgba(90, 74, 107, 0.1);
    
    /* Pulse Glow Animation Colors - Darker purple */
    --pulse-glow-subtle: rgba(90, 74, 107, 0.15);
    --pulse-glow-strong: rgba(90, 74, 107, 0.25);
    
    /* Effects */
    --shadow-glass: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
    --shadow-active: 0 1px 4px rgba(0, 0, 0, 0.08);
    --blur-amount: 10px;
    
    /* Spinner Colors - Darker purple */
    --spinner-border: rgba(90, 74, 107, 0.25);
}

/* Background image overlay for ghost-light theme */
body[data-theme="ghost-light"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/ghost.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* Loading overlay background for ghost-light theme */
body[data-theme="ghost-light"] .app-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/ghost.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
}

/* ============================================
   TOY LIGHT THEME (Primary Fun Colors - Red, Blue, Yellow)
   ============================================ */
body[data-theme="toy-light"] {
    /* Border Radius - Playfully rounded */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    
    /* Background Colors - Bright white with playful hints */
    --bg-app: #fffef0; /* Warm white with subtle yellow tint */
    --bg-glass: rgba(255, 254, 240, 0.9);
    --bg-glass-nav: rgba(240, 245, 255, 0.96); /* White with subtle blue tint matching gradients */
    --bg-glass-hover: rgba(37, 99, 235, 0.15); /* Blue hover */
    --bg-glass-subtle: rgba(255, 220, 0, 0.08); /* Yellow subtle */
    --bg-glass-active: rgba(239, 68, 68, 0.18); /* Red active */
    --bg-input: rgba(255, 250, 240, 0.85);
    --bg-overlay: rgba(255, 254, 240, 0.95);
    --bg-loading-overlay: rgba(255, 255, 255, 0.98);
    
    /* Border Colors - Primary colors */
    --border-glass: rgba(37, 99, 235, 0.3); /* Blue */
    --border-glass-highlight: rgba(239, 68, 68, 0.4); /* Red */
    
    /* Text Colors - Deep blue for contrast */
    --text-main: #1e3a8a; /* Deep blue - excellent contrast */
    --text-muted: #3b82f6; /* Bright blue */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Primary blue (main accent) */
    --accent-primary: #36af7f; /* Vibrant primary blue */
    --accent-primary-dark: #1e40af;
    --accent-glow: rgba(37, 99, 235, 0.35);
    --accent-glow-strong: rgba(37, 99, 235, 0.45);
    --accent-glow-subtle: rgba(37, 99, 235, 0.25);
    --accent-primary-bg: rgba(37, 99, 235, 0.18);
    --accent-primary-bg-strong: rgba(37, 99, 235, 0.28);
    
    /* Status Colors - Primary colors */
    --accent-danger: #ef4444; /* Primary red */
    --accent-danger-bg: rgba(239, 68, 68, 0.15);
    --accent-danger-bg-strong: rgba(239, 68, 68, 0.25);
    --accent-danger-border: rgba(239, 68, 68, 0.35);
    --accent-danger-glow: rgba(239, 68, 68, 0.3);
    
    --accent-success: #22c55e; /* Green (secondary to primary) */
    --accent-success-bg: rgba(34, 197, 94, 0.15);
    
    --accent-warning: #fbbf24; /* Primary yellow */
    --accent-warning-bg: rgba(251, 191, 36, 0.18);
    
    /* Background Gradients - Primary color playful gradients */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0.08) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.07) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.06) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.05) 25%, transparent 40%);
    
    /* Long Press Progress Gradients - Blue primary */
    --progress-gradient-start: rgba(37, 99, 235, 0.35);
    --progress-gradient-mid: rgba(37, 99, 235, 0.6);
    --progress-gradient-end: rgba(37, 99, 235, 0.85);
    --progress-gradient-bg-start: rgba(37, 99, 235, 0.18);
    --progress-gradient-bg-mid: rgba(37, 99, 235, 0.35);
    --progress-gradient-bg-end: rgba(37, 99, 235, 0.18);
    
    /* Pulse Glow Animation Colors - Blue */
    --pulse-glow-subtle: rgba(37, 99, 235, 0.35);
    --pulse-glow-strong: rgba(37, 99, 235, 0.45);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(37, 99, 235, 0.18);
    --shadow-active: 0 2px 8px rgba(239, 68, 68, 0.25);
    --blur-amount: 12px;
    
    /* Spinner Colors - Blue */
    --spinner-border: rgba(37, 99, 235, 0.35);
}

/* ============================================
   WHITE TERMINAL THEME
   ============================================ */
body[data-theme="white-terminal"] {
    /* Border Radius - Sharp (terminal aesthetic) */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    
    /* Background Colors */
    --bg-app: #000000;
    --bg-glass: rgba(0, 0, 0, 0.9);
    --bg-glass-nav: rgba(0, 20, 20, 0.95); /* Subtle cyan tint matching gradients */
    --bg-glass-hover: rgba(255, 255, 255, 0.1);
    --bg-glass-subtle: rgba(255, 255, 255, 0.05);
    --bg-glass-active: rgba(255, 255, 255, 0.15);
    --bg-input: rgba(0, 0, 0, 0.5);
    --bg-overlay: rgba(0, 0, 0, 0.95);
    --bg-loading-overlay: rgba(0, 0, 0, 0.98);
    
    /* Border Colors */
    --border-glass: rgba(255, 255, 255, 0.2);
    --border-glass-highlight: rgba(255, 255, 255, 0.4);
    
    /* Text Colors */
    --text-main: #ffffff; /* White */
    --text-muted: #808080; /* Gray */
    --text-on-accent: #000000;
    
    /* Accent Colors - Bright cyan for better contrast on black */
    --accent-primary: #00ffff; /* Bright cyan - high contrast on black */
    --accent-primary-dark: #00cccc;
    --accent-glow: rgba(0, 255, 255, 0.4);
    --accent-glow-strong: rgba(0, 255, 255, 0.5);
    --accent-glow-subtle: rgba(0, 255, 255, 0.3);
    --accent-primary-bg: rgba(0, 255, 255, 0.15);
    --accent-primary-bg-strong: rgba(0, 255, 255, 0.25);
    
    /* Status Colors */
    --accent-danger: #ffffff; /* White for danger */
    --accent-danger-bg: rgba(255, 255, 255, 0.1);
    --accent-danger-bg-strong: rgba(255, 255, 255, 0.2);
    --accent-danger-border: rgba(255, 255, 255, 0.3);
    --accent-danger-glow: rgba(255, 255, 255, 0.3);
    
    --accent-success: #ffffff; /* White for success */
    --accent-success-bg: rgba(255, 255, 255, 0.1);
    
    --accent-warning: #808080; /* Gray for warning */
    --accent-warning-bg: rgba(128, 128, 128, 0.1);
    
    /* Background Gradients - Minimal, using only white/gray */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.01) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.01) 25%, transparent 40%);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(255, 255, 255, 0.08);
    --blur-amount: 10px;
    --shadow-active: 0 2px 8px rgba(59, 130, 246, 0.1);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(59, 130, 246, 0.2);
}

/* ============================================
   HYPERVANILLA THEME (70's Space Age)
   ============================================ */
body[data-theme="hypervanilla"] {
    /* Force Helvetica font */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    
    /* Remove all border radii for sharp, geometric look */
    border-radius: 0 !important;
    
    /* Background Colors - Light cream/white (clean, minimalist) */
    --bg-app: #fefcf8; /* Light cream/white base */
    --bg-glass: rgba(255, 255, 255, 0.9); /* Clean white */
    --bg-glass-nav: rgba(255, 255, 255, 0.96); /* Pure white nav */
    --bg-glass-hover: rgba(59, 130, 246, 0.1); /* Blue hover */
    --bg-glass-subtle: rgba(251, 146, 60, 0.05); /* Orange subtle */
    --bg-glass-active: rgba(59, 130, 246, 0.15); /* Blue active */
    --bg-input: rgba(255, 255, 255, 0.95); /* White input */
    --bg-overlay: rgba(254, 252, 248, 0.95); /* Light cream overlay */
    --bg-loading-overlay: rgba(255, 255, 255, 0.98); /* White loading */
    
    /* Border Colors - Subtle colorful borders */
    --border-glass: rgba(59, 130, 246, 0.2); /* Blue border */
    --border-glass-highlight: rgba(251, 146, 60, 0.3); /* Orange highlight */
    
    /* Text Colors - Dark for contrast on light */
    --text-main: #1e293b; /* Dark slate text */
    --text-muted: #64748b; /* Medium slate */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Vibrant blue (from gradient top) */
    --accent-primary: #cd6b1b; /* Vibrant blue */
    --accent-primary-dark: #2563eb;
    --accent-glow: rgba(59, 130, 246, 0.35);
    --accent-glow-strong: rgba(59, 130, 246, 0.45);
    --accent-glow-subtle: rgba(59, 130, 246, 0.25);
    --accent-primary-bg: rgba(59, 130, 246, 0.12);
    --accent-primary-bg-strong: rgba(59, 130, 246, 0.22);
    
    /* Status Colors - Matching gradient colors */
    --accent-danger: #ef4444; /* Vibrant red */
    --accent-danger-bg: rgba(239, 68, 68, 0.12);
    --accent-danger-bg-strong: rgba(239, 68, 68, 0.2);
    --accent-danger-border: rgba(239, 68, 68, 0.3);
    --accent-danger-glow: rgba(239, 68, 68, 0.3);
    
    --accent-success: #3b82f6; /* Blue (from gradient) */
    --accent-success-bg: rgba(59, 130, 246, 0.12);
    
    --accent-warning: #fbbf24; /* Bright yellow */
    --accent-warning-bg: rgba(251, 191, 36, 0.15);
    
    /* Background Gradients - Blue to orange to yellow/red gradient */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.08) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(251, 146, 60, 0.2) 0%, rgba(239, 68, 68, 0.08) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.06) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(59, 130, 246, 0.15) 0%, rgba(251, 146, 60, 0.05) 25%, transparent 40%);
    
    /* Long Press Progress Gradients - Blue gradient */
    --progress-gradient-start: rgba(59, 130, 246, 0.3);
    --progress-gradient-mid: rgba(59, 130, 246, 0.55);
    --progress-gradient-end: rgba(59, 130, 246, 0.8);
    --progress-gradient-bg-start: rgba(59, 130, 246, 0.15);
    --progress-gradient-bg-mid: rgba(59, 130, 246, 0.3);
    --progress-gradient-bg-end: rgba(59, 130, 246, 0.15);
    
    /* Pulse Glow Animation Colors - Colorful glows */
    --pulse-glow-subtle: rgba(59, 130, 246, 0.35);
    --pulse-glow-strong: rgba(251, 146, 60, 0.4);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(59, 130, 246, 0.12);
    --shadow-active: 0 2px 8px rgba(251, 146, 60, 0.2);
    --blur-amount: 12px;
    
    /* Spinner Colors - Blue */
    --spinner-border: rgba(59, 130, 246, 0.3);
}

/* Force Helvetica for all elements in Hypervanilla theme, except icons */
body[data-theme="hypervanilla"] {
    --radius-sm: 0 !important;
    --radius-md: 0 !important;
    --radius-lg: 0 !important;
    --radius-xl: 0 !important;
}

body[data-theme="hypervanilla"] * {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    border-radius: 0 !important;
}

/* Allow Material Icons to use their icon font */
body[data-theme="hypervanilla"] .material-icons-round,
body[data-theme="hypervanilla"] .material-icons-round * {
    font-family: "Material Icons Round" !important;
}

/* ============================================
   OBSIDIAN THEME (Deep Purple & Lavender)
   ============================================ */
body[data-theme="obsidian"] {
    /* Border Radius - Subtle rounded */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Background Colors - Deepest purple-black */
    --bg-app: #050208; /* Very deep black with subtle purple undertone */
    --bg-glass: rgba(10, 5, 18, 0.92); /* Deep dark purple */
    --bg-glass-nav: rgba(8, 3, 15, 0.97); /* Very dark purple-black */
    --bg-glass-hover: rgba(139, 92, 246, 0.15); /* Deep purple hover */
    --bg-glass-subtle: rgba(139, 92, 246, 0.08);
    --bg-glass-active: rgba(139, 92, 246, 0.2);
    --bg-input: rgba(10, 5, 18, 0.85); /* Deep dark purple input */
    --bg-overlay: rgba(5, 2, 10, 0.97); /* Very dark purple-black */
    --bg-loading-overlay: rgba(3, 1, 8, 0.99); /* Almost pure black */
    
    /* Border Colors - Deep purple, subtle */
    --border-glass: rgba(139, 92, 246, 0.2); /* Deep purple border */
    --border-glass-highlight: rgba(167, 139, 250, 0.3); /* Slightly lighter purple */
    
    /* Text Colors - Very light lavender */
    --text-main: #faf5ff; /* Almost white lavender - maximum contrast */
    --text-muted: #d8b4fe; /* Light purple */
    --text-on-accent: #0f0519;
    
    /* Accent Colors - Very bright lavender for maximum contrast on dark */
    --accent-primary: #e9d5ff; /* Very bright lavender - maximum contrast */
    --accent-primary-dark: #d8b4fe;
    --accent-glow: rgba(233, 213, 255, 0.5);
    --accent-glow-strong: rgba(233, 213, 255, 0.6);
    --accent-glow-subtle: rgba(233, 213, 255, 0.4);
    --accent-primary-bg: rgba(233, 213, 255, 0.2);
    --accent-primary-bg-strong: rgba(233, 213, 255, 0.3);
    
    /* Status Colors */
    --accent-danger: #f472b6; /* Pink */
    --accent-danger-bg: rgba(244, 114, 182, 0.15);
    --accent-danger-bg-strong: rgba(244, 114, 182, 0.25);
    --accent-danger-border: rgba(244, 114, 182, 0.35);
    --accent-danger-glow: rgba(244, 114, 182, 0.3);
    
    --accent-success: #a78bfa; /* Purple */
    --accent-success-bg: rgba(167, 139, 250, 0.15);
    
    --accent-warning: #fbbf24; /* Yellow */
    --accent-warning-bg: rgba(251, 191, 36, 0.15);
    
    /* Background Gradients - Deep dark purple/black gradients */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(0, 0, 0, 0.4) 0%, rgba(20, 10, 35, 0.2) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(20, 10, 35, 0.3) 0%, rgba(0, 0, 0, 0.35) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(0, 0, 0, 0.3) 0%, rgba(15, 5, 25, 0.15) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(15, 5, 25, 0.25) 0%, rgba(0, 0, 0, 0.3) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(200, 132, 252, 0.3);
    --progress-gradient-mid: rgba(200, 132, 252, 0.5);
    --progress-gradient-end: rgba(200, 132, 252, 0.7);
    --progress-gradient-bg-start: rgba(200, 132, 252, 0.15);
    --progress-gradient-bg-mid: rgba(200, 132, 252, 0.3);
    --progress-gradient-bg-end: rgba(200, 132, 252, 0.15);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(200, 132, 252, 0.3);
    --pulse-glow-strong: rgba(200, 132, 252, 0.4);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(139, 92, 246, 0.25);
    --shadow-active: 0 2px 8px rgba(200, 132, 252, 0.3);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(200, 132, 252, 0.3);
}

/* Background image overlay for obsidian theme */
body[data-theme="obsidian"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/obsidian.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* Loading overlay background for obsidian theme */
body[data-theme="obsidian"] .app-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/obsidian.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
}

/* ============================================
   WIMBOWS THEME (Early 1990s Windows)
   ============================================ */
body[data-theme="wimbows"] {
    /* Force sharp borders, no rounded corners */
    border-radius: 0 !important;
    
    /* Background Colors - Brighter Windows gray */
    --bg-app: #e5e5e5; /* Brighter Windows gray */
    --bg-glass: rgba(229, 229, 229, 0.95);
    --bg-glass-nav: rgba(235, 235, 245, 0.98); /* Brighter gray with subtle blue tint matching gradients */
    --bg-glass-hover: rgba(0, 0, 204, 0.15); /* More saturated blue hover */
    --bg-glass-subtle: rgba(0, 0, 204, 0.05);
    --bg-glass-active: rgba(0, 0, 204, 0.25);
    --bg-input: rgba(255, 255, 255, 0.95); /* White input background */
    --bg-overlay: rgba(229, 229, 229, 0.95);
    --bg-loading-overlay: rgba(235, 235, 235, 0.98);
    
    /* Border Colors - Brighter gray borders */
    --border-glass: rgba(180, 180, 180, 0.8); /* Brighter gray border */
    --border-glass-highlight: rgba(0, 0, 0, 0.9); /* Black highlight for 3D effect */
    
    /* Text Colors - Black text on light background */
    --text-main: #000000; /* Black text */
    --text-muted: #505050; /* Slightly lighter dark gray */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - More saturated Windows blue */
    --accent-primary: #0000cc; /* More saturated Windows blue */
    --accent-primary-dark: #000099;
    --accent-glow: rgba(0, 0, 204, 0.35);
    --accent-glow-strong: rgba(0, 0, 204, 0.45);
    --accent-glow-subtle: rgba(0, 0, 204, 0.25);
    --accent-primary-bg: rgba(0, 0, 204, 0.18);
    --accent-primary-bg-strong: rgba(0, 0, 204, 0.28);
    
    /* Status Colors - More saturated */
    --accent-danger: #cc0000; /* More saturated red */
    --accent-danger-bg: rgba(204, 0, 0, 0.15);
    --accent-danger-bg-strong: rgba(204, 0, 0, 0.25);
    --accent-danger-border: rgba(204, 0, 0, 0.4);
    --accent-danger-glow: rgba(204, 0, 0, 0.3);
    
    --accent-success: #00cc00; /* More saturated green */
    --accent-success-bg: rgba(0, 204, 0, 0.15);
    
    --accent-warning: #cc9900; /* More saturated yellow/orange */
    --accent-warning-bg: rgba(204, 153, 0, 0.15);
    
    /* Background Gradients - Minimal, classic Windows look with more saturation */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(0, 0, 204, 0.12) 0%, rgba(0, 0, 204, 0.04) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(200, 200, 200, 0.1) 0%, rgba(200, 200, 200, 0.03) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(0, 0, 204, 0.08) 0%, rgba(0, 0, 204, 0.03) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(200, 200, 200, 0.08) 0%, rgba(200, 200, 200, 0.03) 25%, transparent 40%);
    
    /* Long Press Progress Gradients - More saturated blue */
    --progress-gradient-start: rgba(0, 0, 204, 0.35);
    --progress-gradient-mid: rgba(0, 0, 204, 0.55);
    --progress-gradient-end: rgba(0, 0, 204, 0.75);
    --progress-gradient-bg-start: rgba(0, 0, 204, 0.18);
    --progress-gradient-bg-mid: rgba(0, 0, 204, 0.35);
    --progress-gradient-bg-end: rgba(0, 0, 204, 0.18);
    
    /* Pulse Glow Animation Colors - More saturated */
    --pulse-glow-subtle: rgba(0, 0, 204, 0.35);
    --pulse-glow-strong: rgba(0, 0, 204, 0.45);
    
    /* Effects - Sharp, no blur for classic Windows look */
    --shadow-glass: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.4);
    --blur-amount: 0px; /* No blur for sharp Windows look */
    
    /* Spinner Colors - More saturated */
    --spinner-border: rgba(0, 0, 204, 0.35);
}

/* Force sharp borders for all elements in Wimbows theme */
body[data-theme="wimbows"] {
    --radius-sm: 0 !important;
    --radius-md: 0 !important;
    --radius-lg: 0 !important;
    --radius-xl: 0 !important;
}

body[data-theme="wimbows"] * {
    border-radius: 0 !important;
}

/* Darken life tracker icons for Wimbows theme */
body[data-theme="wimbows"] .tracker-btn .material-icons-round[style*="#ff6b6b"] {
    color: #cc0000 !important; /* Darker red for nutrition */
}

body[data-theme="wimbows"] .tracker-btn .material-icons-round[style*="#748ffc"] {
    color: #0000cc !important; /* Darker blue for sleep */
}

body[data-theme="wimbows"] .tracker-btn .material-icons-round[style*="#69db7c"] {
    color: #008000 !important; /* Darker green for reading */
}

body[data-theme="wimbows"] .tracker-btn .material-icons-round[style*="#ae3ec9"] {
    color: #800080 !important; /* Darker purple for meditation */
}

/* ============================================
   ULTRA THEME (Vaporwave Aesthetics)
   ============================================ */
body[data-theme="ultra"] {
    /* Border Radius - Soft rounded */
    --radius-sm: 7px;
    --radius-md: 11px;
    --radius-lg: 15px;
    --radius-xl: 19px;
    
    /* Background Colors - Light with pink/cyan hints */
    --bg-app: #fff0f5; /* Very light pink */
    --bg-glass: rgba(255, 240, 245, 0.85);
    --bg-glass-nav: rgba(255, 240, 250, 0.95); /* Pink with subtle cyan tint matching gradients */
    --bg-glass-hover: rgba(255, 20, 147, 0.12); /* Hot pink hover */
    --bg-glass-subtle: rgba(0, 191, 255, 0.05); /* Cyan subtle */
    --bg-glass-active: rgba(255, 20, 147, 0.18);
    --bg-input: rgba(255, 250, 250, 0.8);
    --bg-overlay: rgba(255, 240, 245, 0.9);
    --bg-loading-overlay: rgba(255, 240, 245, 0.95);
    
    /* Border Colors - Pink and cyan */
    --border-glass: rgba(255, 20, 147, 0.25);
    --border-glass-highlight: rgba(0, 191, 255, 0.35);
    
    /* Text Colors - Dark text on light background */
    --text-main: #4b0082; /* Indigo text */
    --text-muted: #9370db; /* Medium purple */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Hot pink and cyan (vaporwave classic) */
    --accent-primary: #ff1493; /* Hot pink */
    --accent-primary-dark: #dc143c;
    --accent-glow: rgba(255, 20, 147, 0.3);
    --accent-glow-strong: rgba(255, 20, 147, 0.4);
    --accent-glow-subtle: rgba(255, 20, 147, 0.2);
    --accent-primary-bg: rgba(255, 20, 147, 0.12);
    --accent-primary-bg-strong: rgba(255, 20, 147, 0.2);
    
    /* Status Colors */
    --accent-danger: #ff1493; /* Hot pink */
    --accent-danger-bg: rgba(255, 20, 147, 0.12);
    --accent-danger-bg-strong: rgba(255, 20, 147, 0.2);
    --accent-danger-border: rgba(255, 20, 147, 0.3);
    --accent-danger-glow: rgba(255, 20, 147, 0.3);
    
    --accent-success: #00ced1; /* Dark turquoise */
    --accent-success-bg: rgba(0, 206, 209, 0.12);
    
    --accent-warning: #ff69b4; /* Hot pink variant */
    --accent-warning-bg: rgba(255, 105, 180, 0.12);
    
    /* Background Gradients - Vaporwave pink and cyan gradients */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(255, 20, 147, 0.2) 0%, rgba(255, 20, 147, 0.06) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(0, 191, 255, 0.18) 0%, rgba(0, 191, 255, 0.06) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(255, 20, 147, 0.14) 0%, rgba(255, 20, 147, 0.05) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(0, 191, 255, 0.14) 0%, rgba(0, 191, 255, 0.05) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(255, 20, 147, 0.3);
    --progress-gradient-mid: rgba(255, 20, 147, 0.5);
    --progress-gradient-end: rgba(255, 20, 147, 0.7);
    --progress-gradient-bg-start: rgba(255, 20, 147, 0.15);
    --progress-gradient-bg-mid: rgba(255, 20, 147, 0.3);
    --progress-gradient-bg-end: rgba(255, 20, 147, 0.15);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(255, 20, 147, 0.3);
    --pulse-glow-strong: rgba(255, 20, 147, 0.4);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(255, 20, 147, 0.15);
    --shadow-active: 0 2px 8px rgba(255, 20, 147, 0.2);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(255, 20, 147, 0.3);
}

/* Background image overlay for ultra theme */
body[data-theme="ultra"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/ultra-pink.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* Loading overlay background for ultra theme */
body[data-theme="ultra"] .app-loading-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/backgrounds/ultra-pink.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -1;
}

/* ============================================
   FOREST THEME (Nature Inspired - Emerald & Sage)
   ============================================ */
body[data-theme="forest"] {
    /* Border Radius - Organic rounded */
    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 17px;
    --radius-xl: 21px;
    
    /* Background Colors - Soft sage green */
    --bg-app: #f0f7f4; /* Very light sage */
    --bg-glass: rgba(240, 247, 244, 0.88);
    --bg-glass-nav: rgba(240, 252, 248, 0.96); /* White with subtle green tint matching gradients */
    --bg-glass-hover: rgba(16, 185, 129, 0.12);
    --bg-glass-subtle: rgba(5, 150, 105, 0.05);
    --bg-glass-active: rgba(16, 185, 129, 0.2);
    --bg-input: rgba(209, 250, 229, 0.8);
    --bg-overlay: rgba(240, 247, 244, 0.95);
    --bg-loading-overlay: rgba(255, 255, 255, 0.98);
    
    /* Border Colors - Forest green */
    --border-glass: rgba(5, 150, 105, 0.25);
    --border-glass-highlight: rgba(4, 120, 87, 0.4);
    
    /* Text Colors - Deep forest green for excellent contrast */
    --text-main: #064e3b; /* Very dark emerald - high contrast */
    --text-muted: #047857; /* Medium emerald */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Vibrant emerald green */
    --accent-primary: #10b981; /* Emerald */
    --accent-primary-dark: #059669;
    --accent-glow: rgba(16, 185, 129, 0.3);
    --accent-glow-strong: rgba(16, 185, 129, 0.4);
    --accent-glow-subtle: rgba(16, 185, 129, 0.2);
    --accent-primary-bg: rgba(16, 185, 129, 0.15);
    --accent-primary-bg-strong: rgba(16, 185, 129, 0.25);
    
    /* Status Colors */
    --accent-danger: #dc2626; /* Red */
    --accent-danger-bg: rgba(220, 38, 38, 0.12);
    --accent-danger-bg-strong: rgba(220, 38, 38, 0.22);
    --accent-danger-border: rgba(220, 38, 38, 0.35);
    --accent-danger-glow: rgba(220, 38, 38, 0.3);
    
    --accent-success: #10b981; /* Emerald */
    --accent-success-bg: rgba(16, 185, 129, 0.15);
    
    --accent-warning: #f59e0b; /* Amber */
    --accent-warning-bg: rgba(245, 158, 11, 0.15);
    
    /* Background Gradients - Forest green gradients */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.07) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(5, 150, 105, 0.18) 0%, rgba(5, 150, 105, 0.06) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.05) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(5, 150, 105, 0.14) 0%, rgba(5, 150, 105, 0.05) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(16, 185, 129, 0.3);
    --progress-gradient-mid: rgba(16, 185, 129, 0.55);
    --progress-gradient-end: rgba(16, 185, 129, 0.8);
    --progress-gradient-bg-start: rgba(16, 185, 129, 0.15);
    --progress-gradient-bg-mid: rgba(16, 185, 129, 0.3);
    --progress-gradient-bg-end: rgba(16, 185, 129, 0.15);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(16, 185, 129, 0.3);
    --pulse-glow-strong: rgba(16, 185, 129, 0.4);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(5, 150, 105, 0.15);
    --shadow-active: 0 2px 8px rgba(16, 185, 129, 0.2);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(16, 185, 129, 0.3);
}

/* ============================================
   SUNSET THEME (Warm Orange & Coral)
   ============================================ */
body[data-theme="sunset"] {
    /* Border Radius - Warm rounded */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Background Colors - Warm peach/cream */
    --bg-app: #fff7ed; /* Warm cream */
    --bg-glass: rgba(255, 247, 237, 0.9);
    --bg-glass-nav: rgba(255, 250, 240, 0.96); /* Cream with subtle orange tint matching gradients */
    --bg-glass-hover: rgba(249, 115, 22, 0.12);
    --bg-glass-subtle: rgba(234, 88, 12, 0.05);
    --bg-glass-active: rgba(249, 115, 22, 0.2);
    --bg-input: rgba(255, 237, 213, 0.85);
    --bg-overlay: rgba(255, 247, 237, 0.95);
    --bg-loading-overlay: rgba(255, 255, 250, 0.98);
    
    /* Border Colors - Warm orange */
    --border-glass: rgba(234, 88, 12, 0.25);
    --border-glass-highlight: rgba(194, 65, 12, 0.4);
    
    /* Text Colors - Deep orange-brown for excellent contrast */
    --text-main: #7c2d12; /* Very dark orange-brown - high contrast */
    --text-muted: #c2410c; /* Medium orange */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Vibrant coral/orange */
    --accent-primary: #f97316; /* Vibrant orange */
    --accent-primary-dark: #ea580c;
    --accent-glow: rgba(249, 115, 22, 0.3);
    --accent-glow-strong: rgba(249, 115, 22, 0.4);
    --accent-glow-subtle: rgba(249, 115, 22, 0.2);
    --accent-primary-bg: rgba(249, 115, 22, 0.15);
    --accent-primary-bg-strong: rgba(249, 115, 22, 0.25);
    
    /* Status Colors */
    --accent-danger: #dc2626; /* Red */
    --accent-danger-bg: rgba(220, 38, 38, 0.12);
    --accent-danger-bg-strong: rgba(220, 38, 38, 0.22);
    --accent-danger-border: rgba(220, 38, 38, 0.35);
    --accent-danger-glow: rgba(220, 38, 38, 0.3);
    
    --accent-success: #16a34a; /* Green */
    --accent-success-bg: rgba(22, 163, 74, 0.12);
    
    --accent-warning: #f59e0b; /* Amber */
    --accent-warning-bg: rgba(245, 158, 11, 0.15);
    
    /* Background Gradients - Warm sunset gradients */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.07) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(251, 146, 60, 0.18) 0%, rgba(251, 146, 60, 0.06) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(249, 115, 22, 0.14) 0%, rgba(249, 115, 22, 0.05) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(251, 146, 60, 0.14) 0%, rgba(251, 146, 60, 0.05) 25%, transparent 40%);
    
    /* Long Press Progress Gradients */
    --progress-gradient-start: rgba(249, 115, 22, 0.3);
    --progress-gradient-mid: rgba(249, 115, 22, 0.55);
    --progress-gradient-end: rgba(249, 115, 22, 0.8);
    --progress-gradient-bg-start: rgba(249, 115, 22, 0.15);
    --progress-gradient-bg-mid: rgba(249, 115, 22, 0.3);
    --progress-gradient-bg-end: rgba(249, 115, 22, 0.15);
    
    /* Pulse Glow Animation Colors */
    --pulse-glow-subtle: rgba(249, 115, 22, 0.3);
    --pulse-glow-strong: rgba(249, 115, 22, 0.4);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(234, 88, 12, 0.15);
    --shadow-active: 0 2px 8px rgba(249, 115, 22, 0.2);
    --blur-amount: 12px;
    
    /* Spinner Colors */
    --spinner-border: rgba(249, 115, 22, 0.3);
}

/* ============================================
   VANTA THEME (Dark Gray on Black - Minimal Contrast)
   ============================================ */
body[data-theme="vanta"] {
    /* Remove all border radii for sharp, geometric look */
    border-radius: 0 !important;
    
    /* Background Colors - Dark gray on black */
    --bg-app: #000000; /* Pure black */
    --bg-glass: rgba(20, 20, 20, 0.95); /* Dark gray */
    --bg-glass-nav: rgba(15, 15, 15, 0.98); /* Slightly darker */
    --bg-glass-hover: rgba(120, 120, 120, 0.15); /* Light gray hover */
    --bg-glass-subtle: rgba(120, 120, 120, 0.05); /* Very subtle */
    --bg-glass-active: rgba(120, 120, 120, 0.2); /* Light gray active */
    --bg-input: rgba(25, 25, 25, 0.95); /* Dark gray input */
    --bg-overlay: rgba(0, 0, 0, 0.95); /* Black overlay */
    --bg-loading-overlay: rgba(10, 10, 10, 0.99); /* Very dark gray */
    
    /* Border Colors - Light gray (barely visible for minimal contrast) */
    --border-glass: rgba(140, 140, 140, 0.25); /* Light gray border - minimal contrast */
    --border-glass-highlight: rgba(160, 160, 160, 0.35); /* Slightly lighter */
    
    /* Text Colors - Light gray (minimal contrast) */
    --text-main: #b0b0b0; /* Light gray - barely compliant */
    --text-muted: #808080; /* Medium gray */
    --text-on-accent: #000000;
    
    /* Accent Colors - Light gray */
    --accent-primary: #c0c0c0; /* Light gray accent */
    --accent-primary-dark: #a0a0a0;
    --accent-glow: rgba(192, 192, 192, 0.2);
    --accent-glow-strong: rgba(192, 192, 192, 0.3);
    --accent-glow-subtle: rgba(192, 192, 192, 0.1);
    --accent-primary-bg: rgba(192, 192, 192, 0.1);
    --accent-primary-bg-strong: rgba(192, 192, 192, 0.15);
    
    /* Status Colors - Keep good/bad colors but muted */
    --accent-danger: #ff6b6b; /* Muted red */
    --accent-danger-bg: rgba(255, 107, 107, 0.15);
    --accent-danger-bg-strong: rgba(255, 107, 107, 0.25);
    --accent-danger-border: rgba(255, 107, 107, 0.3);
    --accent-danger-glow: rgba(255, 107, 107, 0.2);
    
    --accent-success: #51cf66; /* Muted green */
    --accent-success-bg: rgba(81, 207, 102, 0.15);
    
    --accent-warning: #ffd43b; /* Muted yellow */
    --accent-warning-bg: rgba(255, 212, 59, 0.15);
    
    /* Background Gradients - Minimal */
    --bg-gradient-primary: none;
    --bg-gradient-secondary: none;
    --bg-gradient-tertiary: none;
    --bg-gradient-quaternary: none;
    
    /* Long Press Progress Gradients - Light gray */
    --progress-gradient-start: rgba(192, 192, 192, 0.3);
    --progress-gradient-mid: rgba(192, 192, 192, 0.5);
    --progress-gradient-end: rgba(192, 192, 192, 0.7);
    --progress-gradient-bg-start: rgba(192, 192, 192, 0.1);
    --progress-gradient-bg-mid: rgba(192, 192, 192, 0.2);
    --progress-gradient-bg-end: rgba(192, 192, 192, 0.1);
    
    /* Pulse Glow Animation Colors - Light gray */
    --pulse-glow-subtle: rgba(192, 192, 192, 0.15);
    --pulse-glow-strong: rgba(192, 192, 192, 0.25);
    
    /* Effects - Minimal shadows */
    --shadow-glass: 0 1px 3px 0 rgba(192, 192, 192, 0.1);
    --shadow-active: 0 1px 2px rgba(192, 192, 192, 0.15);
    --blur-amount: 8px;
    
    /* Spinner Colors - Light gray */
    --spinner-border: rgba(192, 192, 192, 0.3);
}

/* Remove all border radii for Vanta theme */
body[data-theme="vanta"] {
    --radius-sm: 0 !important;
    --radius-md: 0 !important;
    --radius-lg: 0 !important;
    --radius-xl: 0 !important;
}

body[data-theme="vanta"] * {
    border-radius: 0 !important;
}

/* ============================================
   GOLD THEME (White and Cream with Deep Gold)
   ============================================ */
body[data-theme="gold"] {
    /* Border Radius - Rounded */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    
    /* Background Colors - White and light cream/gray */
    --bg-app: #faf8f3; /* Light cream */
    --bg-glass: rgba(255, 255, 255, 0.95); /* White */
    --bg-glass-nav: rgba(255, 252, 248, 0.98); /* Warm white */
    --bg-glass-hover: rgba(184, 134, 11, 0.08); /* Gold hover */
    --bg-glass-subtle: rgba(184, 134, 11, 0.03); /* Subtle gold */
    --bg-glass-active: rgba(184, 134, 11, 0.12); /* Gold active */
    --bg-input: rgba(255, 255, 255, 0.95); /* White input */
    --bg-overlay: rgba(250, 248, 243, 0.95); /* Cream overlay */
    --bg-loading-overlay: rgba(255, 255, 255, 0.99); /* White */
    
    /* Border Colors - Gold tinted */
    --border-glass: rgba(184, 134, 11, 0.2); /* Gold border */
    --border-glass-highlight: rgba(184, 134, 11, 0.35); /* Stronger gold */
    
    /* Text Colors - Dark brown/black */
    --text-main: #1a1612; /* Dark brown */
    --text-muted: #4a4538; /* Medium brown */
    --text-on-accent: #ffffff;
    
    /* Accent Colors - Deep gold */
    --accent-primary: #b8860b; /* Deep gold */
    --accent-primary-dark: #8b6914;
    --accent-glow: rgba(184, 134, 11, 0.3);
    --accent-glow-strong: rgba(184, 134, 11, 0.4);
    --accent-glow-subtle: rgba(184, 134, 11, 0.2);
    --accent-primary-bg: rgba(184, 134, 11, 0.12);
    --accent-primary-bg-strong: rgba(184, 134, 11, 0.22);
    
    /* Status Colors */
    --accent-danger: #c2410c; /* Warm red */
    --accent-danger-bg: rgba(194, 65, 12, 0.1);
    --accent-danger-bg-strong: rgba(194, 65, 12, 0.2);
    --accent-danger-border: rgba(194, 65, 12, 0.3);
    --accent-danger-glow: rgba(194, 65, 12, 0.25);
    
    --accent-success: #059669; /* Green */
    --accent-success-bg: rgba(5, 150, 105, 0.12);
    
    --accent-warning: #d97706; /* Orange */
    --accent-warning-bg: rgba(217, 119, 6, 0.12);
    
    /* Background Gradients - Gold tones */
    --bg-gradient-primary: radial-gradient(circle at 10% 20%, rgba(184, 134, 11, 0.12) 0%, rgba(184, 134, 11, 0.04) 30%, transparent 50%);
    --bg-gradient-secondary: radial-gradient(circle at 90% 80%, rgba(218, 165, 32, 0.1) 0%, rgba(218, 165, 32, 0.03) 30%, transparent 50%);
    --bg-gradient-tertiary: radial-gradient(circle at 10% 80%, rgba(184, 134, 11, 0.08) 0%, rgba(184, 134, 11, 0.02) 25%, transparent 40%);
    --bg-gradient-quaternary: radial-gradient(circle at 90% 20%, rgba(218, 165, 32, 0.08) 0%, rgba(218, 165, 32, 0.02) 25%, transparent 40%);
    
    /* Long Press Progress Gradients - Gold */
    --progress-gradient-start: rgba(184, 134, 11, 0.3);
    --progress-gradient-mid: rgba(184, 134, 11, 0.55);
    --progress-gradient-end: rgba(184, 134, 11, 0.8);
    --progress-gradient-bg-start: rgba(184, 134, 11, 0.15);
    --progress-gradient-bg-mid: rgba(184, 134, 11, 0.3);
    --progress-gradient-bg-end: rgba(184, 134, 11, 0.15);
    
    /* Pulse Glow Animation Colors - Gold */
    --pulse-glow-subtle: rgba(184, 134, 11, 0.25);
    --pulse-glow-strong: rgba(184, 134, 11, 0.35);
    
    /* Effects */
    --shadow-glass: 0 8px 32px 0 rgba(184, 134, 11, 0.12);
    --shadow-active: 0 2px 8px rgba(184, 134, 11, 0.2);
    --blur-amount: 12px;
    
    /* Spinner Colors - Gold */
    --spinner-border: rgba(184, 134, 11, 0.3);
}