:root, body.theme-dark {
    --bg-primary: #1e2329;
    --bg-secondary: #2a2f36;
    --bg-card: #32363e;
    --bg-card-hover: #3a3f47;
    --card-gradient: var(--bg-card);
    
    --text-primary: #ffffff;
    --text-secondary: #b0b6bd;
    --text-muted: #8b9097;
    
    --accent-primary: #00b4d8;
    --accent-hover: #0096c7;
    --accent-gradient: linear-gradient(135deg, #00b4d8, #0096c7);
    --glow-strong: 0 10px 35px rgba(0, 180, 216, 0.22);
    --success: #10b981;
    --warning: #f59e0b;
    
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.06);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

body.theme-cyberpunk {
    --bg-primary: #0a0a0f;
    --bg-secondary: #151520;
    --bg-card: #1a1a2e;
    --bg-card-hover: #1f1f35;
    --card-gradient: linear-gradient(160deg, rgba(0, 229, 204, 0.12), rgba(138, 43, 226, 0.18));
    
    --text-primary: #e6d9ff;
    --text-secondary: #c9aaff;
    --text-muted: #b3b3b3;
    
    --accent-primary: #00e5cc;
    --accent-hover: #00b3a0;
    --accent-gradient: linear-gradient(135deg, #00e5cc, #00b3a0);
    --glow-strong: 0 10px 35px rgba(0, 229, 204, 0.25);
    --success: #00e5cc;
    --warning: #ff9500;
    
    --border-primary: rgba(138, 43, 226, 0.25);
    --border-secondary: rgba(201, 170, 255, 0.15);
    
    --shadow-sm: 0 2px 8px rgba(138, 43, 226, 0.15);
    --shadow-md: 0 4px 16px rgba(138, 43, 226, 0.25);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

body.theme-ocean {
    --bg-primary: #0a1628;
    --bg-secondary: #162d4d;
    --bg-card: #1e3a66;
    --bg-card-hover: #274775;
    --card-gradient: linear-gradient(160deg, rgba(14, 165, 233, 0.14), rgba(14, 165, 233, 0.06));
    
    --text-primary: #ffffff;
    --text-secondary: #7dd3fc;
    --text-muted: #0ea5e9;
    
    --accent-primary: #0ea5e9;
    --accent-hover: #0284c7;
    --accent-gradient: linear-gradient(135deg, #0ea5e9, #0284c7);
    --glow-strong: 0 12px 34px rgba(14, 165, 233, 0.22);
    --success: #14b8a6;
    --warning: #f59e0b;
    
    --border-primary: rgba(14, 165, 233, 0.15);
    --border-secondary: rgba(14, 165, 233, 0.08);
    
    --shadow-sm: 0 2px 8px rgba(14, 165, 233, 0.15);
    --shadow-md: 0 4px 16px rgba(14, 165, 233, 0.25);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

body.theme-light {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --card-gradient: var(--bg-card);
    
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    --accent-primary: #38bdf8;
    --accent-hover: #0ea5e9;
    --accent-gradient: linear-gradient(135deg, #38bdf8, #0ea5e9);
    --glow-strong: 0 12px 30px rgba(14, 165, 233, 0.12);
    --success: #10b981;
    --warning: #f59e0b;
    
    --border-primary: rgba(30, 41, 59, 0.1);
    --border-secondary: rgba(30, 41, 59, 0.05);
    
    --shadow-sm: 0 2px 8px rgba(30, 41, 59, 0.08);
    --shadow-md: 0 4px 16px rgba(30, 41, 59, 0.12);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

body.theme-fox {
    --bg-primary: #1a0f0a;
    --bg-secondary: #2d1b12;
    --bg-card: #3d2518;
    --bg-card-hover: #4a2f1f;
    --card-gradient: linear-gradient(145deg, rgba(255, 107, 53, 0.12), rgba(74, 47, 31, 0.8));

    --text-primary: #fff5f0;
    --text-secondary: #ffb380;
    --text-muted: #cc8866;

    --accent-primary: #ff6b35;
    --accent-hover: #e55a2b;
    --accent-gradient: linear-gradient(135deg, #ff6b35, #e55a2b);
    --glow-strong: 0 12px 32px rgba(255, 107, 53, 0.22);
    --success: #4ade80;
    --warning: #ffa726;

    --border-primary: rgba(255, 107, 53, 0.2);
    --border-secondary: rgba(255, 107, 53, 0.1);

    --shadow-sm: 0 2px 8px rgba(255, 107, 53, 0.15);
    --shadow-md: 0 4px 16px rgba(255, 107, 53, 0.25);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

body.theme-gradient {
    --bg-primary: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--gradient-start, #00ff8f) 28%, transparent), transparent 40%), radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gradient-end, #00a1ff) 28%, transparent), transparent 42%), #05131a;
    --bg-secondary: #071b27;
    --bg-card: rgba(6, 20, 30, 0.8);
    --bg-card-hover: rgba(7, 32, 48, 0.95);
    --card-gradient: linear-gradient(155deg, color-mix(in srgb, var(--gradient-start, #00ff8f) 18%, transparent), color-mix(in srgb, var(--gradient-end, #00a1ff) 24%, transparent));

    --text-primary: #e8fff8;
    --text-secondary: #aee8ff;
    --text-muted: #7dd4ff;

    --accent-primary: var(--gradient-start, #00ff8f);
    --accent-hover: var(--gradient-end, #00a1ff);
    --accent-gradient: linear-gradient(135deg, var(--gradient-start, #00ff8f), var(--gradient-end, #00a1ff));
    --glow-strong: 0 18px 48px color-mix(in srgb, var(--gradient-end, #00a1ff) 40%, transparent), 0 8px 24px color-mix(in srgb, var(--gradient-start, #00ff8f) 34%, transparent);
    --success: color-mix(in srgb, var(--gradient-start, #00ff8f) 76%, #0ff 12%, white 12%);
    --warning: #f9d851;

    --border-primary: color-mix(in srgb, var(--gradient-start, #00ff8f) 32%, transparent);
    --border-secondary: color-mix(in srgb, var(--gradient-end, #00a1ff) 26%, transparent);

    --shadow-sm: 0 4px 12px color-mix(in srgb, var(--gradient-end, #00a1ff) 28%, transparent);
    --shadow-md: 0 10px 30px color-mix(in srgb, var(--gradient-end, #00a1ff) 36%, transparent);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
}

body.theme-mole_hole {
    /* MoleHole Brand Colors - Based on molehole.de dark theme */
    --bg-primary: #2E1B13;
    --bg-secondary: #4A2E21;
    --bg-card: #3D2415;
    --bg-card-hover: #4A2E21;
    --card-gradient: linear-gradient(145deg, rgba(242, 201, 76, 0.08), rgba(212, 160, 23, 0.12));

    /* Text Colors - Warm White & Golden Tones */
    --text-primary: #F5F5F5;
    --text-secondary: #D1D1D1;
    --text-muted: #9E9E9E;

    /* Accent Colors - Golden Brand */
    --accent-primary: #F2C94C;
    --accent-hover: #D4A017;
    --accent-gradient: linear-gradient(135deg, #F2C94C, #D4A017);
    --glow-strong: 0 10px 35px rgba(242, 201, 76, 0.2);

    /* Status Colors */
    --success: #4CAF50;
    --warning: #FFB703;
    --danger: #D62828;

    /* Border Colors - Brown Tones */
    --border-primary: rgba(242, 201, 76, 0.15);
    --border-secondary: rgba(212, 160, 23, 0.08);

    /* Shadows - Warm & Deep */
    --shadow-sm: 0 2px 8px rgba(46, 27, 19, 0.25);
    --shadow-md: 0 4px 16px rgba(46, 27, 19, 0.35);

    /* Border Radius - Consistent with Design */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}