/* ============================================
   Smiggy's World — Theme Palette Definitions
   4 selectable themes via data-theme attribute
   ============================================ */

/* --- Theme 1: Default Dark (Modern high-contrast dark) --- */
[data-theme="dark"] {
    --bg-primary: #06060b;
    --bg-secondary: #0c0c14;
    --bg-card: rgba(20, 20, 35, 0.7);
    --bg-card-hover: rgba(30, 30, 50, 0.8);
    --bg-card-solid: #14141f;
    --bg-nav: rgba(6, 6, 11, 0.85);
    --text-primary: #eaeaf2;
    --text-secondary: #a8a8c0;
    --text-muted: #5e5e78;
    --accent: #00ff88;
    --accent-hover: #33ffaa;
    --accent-glow: rgba(0, 255, 136, 0.12);
    --accent-secondary: #ff6b35;
    --accent-horror: #ff2244;
    --gradient-accent: linear-gradient(135deg, #00ff88, #00ccff);
    --gradient-hero: linear-gradient(135deg, rgba(0,255,136,0.08) 0%, rgba(0,204,255,0.06) 50%, rgba(255,107,53,0.05) 100%);
    --gradient-card: linear-gradient(145deg, rgba(20,20,35,0.9), rgba(15,15,25,0.95));
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(0,255,136,0.2);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(0,255,136,0.08);
    --crt-opacity: 0.02;
    --code-bg: #1e1e2e;
    --success: #00ff88;
    --error: #ff4466;
    --warning: #ffbb33;
    --glass: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
}

/* --- Theme 2: Amber Terminal (Monochrome amber on black) --- */
[data-theme="amber"] {
    --bg-primary: #0a0800;
    --bg-secondary: #111000;
    --bg-card: rgba(18, 16, 2, 0.85);
    --bg-card-hover: rgba(28, 24, 4, 0.9);
    --bg-card-solid: #141200;
    --bg-nav: rgba(10, 8, 0, 0.9);
    --text-primary: #ffb000;
    --text-secondary: #cc8c00;
    --text-muted: #7a5500;
    --accent: #ffb000;
    --accent-hover: #ffc940;
    --accent-glow: rgba(255, 176, 0, 0.12);
    --accent-secondary: #ff8c00;
    --accent-horror: #ff4400;
    --gradient-accent: linear-gradient(135deg, #ffb000, #ff8c00);
    --gradient-hero: linear-gradient(135deg, rgba(255,176,0,0.06) 0%, rgba(255,140,0,0.04) 50%, transparent 100%);
    --gradient-card: linear-gradient(145deg, rgba(18,16,2,0.95), rgba(12,10,0,0.98));
    --border: rgba(255,176,0,0.1);
    --border-hover: rgba(255,176,0,0.25);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px rgba(255,176,0,0.06);
    --crt-opacity: 0.035;
    --code-bg: #111000;
    --success: #ffb000;
    --error: #ff4400;
    --warning: #ff8c00;
    --glass: rgba(255,176,0,0.03);
    --glass-border: rgba(255,176,0,0.08);
}

/* --- Theme 3: Matrix CRT (Phosphor green on dark grey) --- */
[data-theme="matrix"] {
    --bg-primary: #0a0f0a;
    --bg-secondary: #0e140e;
    --bg-card: rgba(10, 20, 10, 0.8);
    --bg-card-hover: rgba(16, 30, 16, 0.85);
    --bg-card-solid: #0e180e;
    --bg-nav: rgba(8, 12, 8, 0.9);
    --text-primary: #33ff33;
    --text-secondary: #22bb22;
    --text-muted: #1a7a1a;
    --accent: #33ff33;
    --accent-hover: #66ff66;
    --accent-glow: rgba(51, 255, 51, 0.12);
    --accent-secondary: #00cc88;
    --accent-horror: #ff2244;
    --gradient-accent: linear-gradient(135deg, #33ff33, #00cc88);
    --gradient-hero: linear-gradient(135deg, rgba(51,255,51,0.06) 0%, rgba(0,204,136,0.04) 50%, transparent 100%);
    --gradient-card: linear-gradient(145deg, rgba(10,20,10,0.92), rgba(6,14,6,0.96));
    --border: rgba(51,255,51,0.08);
    --border-hover: rgba(51,255,51,0.2);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px rgba(51,255,51,0.06);
    --crt-opacity: 0.04;
    --code-bg: #0e140e;
    --success: #33ff33;
    --error: #ff2244;
    --warning: #cccc00;
    --glass: rgba(51,255,51,0.03);
    --glass-border: rgba(51,255,51,0.08);
}

/* --- Theme 4: Workbench Light (Clean high-contrast light) --- */
[data-theme="light"] {
    --bg-primary: #f8f8f5;
    --bg-secondary: #f0f0eb;
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-card-solid: #ffffff;
    --bg-nav: rgba(248, 248, 245, 0.85);
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a60;
    --text-muted: #8a8a9a;
    --accent: #00885a;
    --accent-hover: #00aa70;
    --accent-glow: rgba(0, 136, 90, 0.08);
    --accent-secondary: #cc5522;
    --accent-horror: #cc1133;
    --gradient-accent: linear-gradient(135deg, #00885a, #0088aa);
    --gradient-hero: linear-gradient(135deg, rgba(0,136,90,0.05) 0%, rgba(0,136,170,0.04) 50%, rgba(204,85,34,0.03) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,248,245,0.95));
    --border: rgba(0,0,0,0.06);
    --border-hover: rgba(0,136,90,0.2);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 30px rgba(0,136,90,0.06);
    --crt-opacity: 0;
    --code-bg: #f0f0e8;
    --success: #00885a;
    --error: #cc2244;
    --warning: #cc8800;
    --glass: rgba(255,255,255,0.5);
    --glass-border: rgba(0,0,0,0.06);
}

/* --- Enhanced CRT Scanline & Flicker Overlay --- */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, var(--crt-opacity)) 2px,
        rgba(0, 0, 0, var(--crt-opacity)) 4px
    );
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crt-overlay.crt-active {
    opacity: 1;
}

/* Flicker animation — only active when CRT is toggled on */
@keyframes crt-flicker {
    0%   { opacity: 1; }
    3%   { opacity: 0.96; }
    6%   { opacity: 1; }
    50%  { opacity: 0.98; }
    53%  { opacity: 0.94; }
    56%  { opacity: 1; }
    100% { opacity: 1; }
}

.crt-overlay.crt-active {
    animation: crt-flicker 4s infinite;
}

/* Amber & Matrix themes get stronger scanlines by default */
[data-theme="amber"] .crt-overlay.crt-active,
[data-theme="matrix"] .crt-overlay.crt-active {
    mix-blend-mode: normal;
}