/* ===== THEME SYSTEM =====
   Each theme overrides the design tokens declared in :root (styles.css).
   Themes set: accent pair, accent glow, surface palette, background gradient. */

[data-theme="purple"] {
    --accent: #7c6cff;
    --accent2: #b06bff;
    --accent-soft: rgba(124, 108, 255, 0.16);
    --accent-glow: rgba(124, 108, 255, 0.45);

    --surface-0: #0d0f24;
    --surface-1: #161830;
    --surface-2: #1c1f3a;
    --surface-3: #232646;
    --surface-glass: rgba(22, 24, 48, 0.72);
    --surface-glass-strong: rgba(14, 16, 32, 0.86);

    --bg-start: #1a1a2e;
    --bg-mid:   #16213e;
    --bg-end:   #0f3460;
}

[data-theme="ocean"] {
    --accent: #2cd5c4;
    --accent2: #4f9eff;
    --accent-soft: rgba(44, 213, 196, 0.16);
    --accent-glow: rgba(44, 213, 196, 0.42);

    --surface-0: #061a2b;
    --surface-1: #0f2540;
    --surface-2: #143055;
    --surface-3: #1c4070;
    --surface-glass: rgba(15, 37, 64, 0.74);
    --surface-glass-strong: rgba(6, 26, 43, 0.88);

    --bg-start: #0a1a3a;
    --bg-mid:   #142e6e;
    --bg-end:   #0a4a6a;
}

[data-theme="sunset"] {
    --accent: #ff7e5f;
    --accent2: #feb47b;
    --accent-soft: rgba(255, 126, 95, 0.18);
    --accent-glow: rgba(255, 126, 95, 0.42);

    --surface-0: #1a0a1c;
    --surface-1: #2a0e26;
    --surface-2: #381433;
    --surface-3: #4a1c44;
    --surface-glass: rgba(42, 14, 38, 0.72);
    --surface-glass-strong: rgba(26, 10, 28, 0.88);

    --bg-start: #2d132c;
    --bg-mid:   #6a1235;
    --bg-end:   #b22a3e;
}

[data-theme="forest"] {
    --accent: #34d399;
    --accent2: #84cc16;
    --accent-soft: rgba(52, 211, 153, 0.16);
    --accent-glow: rgba(52, 211, 153, 0.42);

    --surface-0: #061a10;
    --surface-1: #0d2918;
    --surface-2: #143b22;
    --surface-3: #1d4d2d;
    --surface-glass: rgba(13, 41, 24, 0.74);
    --surface-glass-strong: rgba(6, 26, 16, 0.88);

    --bg-start: #0a2a16;
    --bg-mid:   #144d24;
    --bg-end:   #1e7a34;
}

[data-theme="midnight"] {
    --accent: #74b9ff;
    --accent2: #5b8def;
    --accent-soft: rgba(116, 185, 255, 0.16);
    --accent-glow: rgba(116, 185, 255, 0.4);

    --surface-0: #050507;
    --surface-1: #0c0c10;
    --surface-2: #14141a;
    --surface-3: #1c1c24;
    --surface-glass: rgba(12, 12, 16, 0.78);
    --surface-glass-strong: rgba(5, 5, 7, 0.92);

    --bg-start: #000000;
    --bg-mid:   #07070a;
    --bg-end:   #111118;
}

/* ----- Apply theme variables to body background ----- */
body {
    background:
        radial-gradient(60% 50% at 15% 12%, var(--accent-glow), transparent 60%),
        radial-gradient(50% 50% at 88% 82%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 65%),
        linear-gradient(135deg, var(--bg-start, #1a1a2e) 0%, var(--bg-mid, #16213e) 50%, var(--bg-end, #0f3460) 100%);
    background-attachment: fixed;
}

/* ----- Themed surfaces / accents (these win over base styles.css) ----- */
#start-btn,
.app-container button {
    background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
}

.window.active {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
        0 30px 70px var(--accent-glow);
}

.app-container h2 {
    border-bottom-color: var(--border-subtle);
}
.app-container h2::after {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.app-container .info-box {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    border-left-color: var(--accent);
}

.desktop-icon.selected {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.taskbar-app { border-left-color: var(--accent); }

.start-menu-cat { color: var(--accent2); }

#start-menu-header {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.app-container th { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.app-container tbody tr:hover td { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Fallback for browsers without color-mix — uses raw accent rgba */
@supports not (color: color-mix(in srgb, red, blue)) {
    .window.active { border-color: var(--accent); }
    .app-container .info-box { border-color: rgba(124, 108, 255, 0.22); }
    .desktop-icon.selected { border-color: rgba(124, 108, 255, 0.5); }
    .app-container th { background: rgba(124, 108, 255, 0.14); }
    .app-container tbody tr:hover td { background: rgba(124, 108, 255, 0.08); }
}