/* --- ZIELAAN PREMIUM THEME SYSTEM --- */
:root {
    /* Color Palette - High Contrast Light Theme (DEFAULT) */
    --color-primary: hsl(40, 7.3%, 92%);
    /* Warm beige for better contrast */
    --color-secondary: #f4f9f7;
    /* Light greenish-blue - for alternating backgrounds */

    /* Contrast-compliant Accent - Darkened for WCAG AA */
    --color-accent: #0369a1;
    /* Sky 700 */
    --color-accent-hover: #075985;
    /* Sky 800 */

    /* Typography */
    --color-text-main: #0f172a;
    /* Slate 900 */
    --color-text-dim: #475569;
    /* Slate 600 */

    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* Gradients - Updated for alternating light theme */
    --gradient-primary: linear-gradient(135deg, hsl(40, 7.3%, 92%) 0%, #f5f5f0 100%);
    --gradient-accent: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 243, 239, 0.95));
    --gradient-overlay: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
    --gradient-text-hero: linear-gradient(to bottom, #0f172a, #334155);

    /* Typography Settings */
    --font-main: 'Outfit', sans-serif;
    --font-size-base: 16px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Spacing & Layout */
    --container-width: 1240px;
    --header-height: 80px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Effects */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 15px rgba(2, 132, 199, 0.15);

    --glass-blur: blur(12px);
    --glass-border: 1px solid #cbd5e1;
    /* Slate 300 */

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Semantic Component Colors */
    --color-header-bg: rgba(255, 255, 255, 0.9);
    --color-header-bg-scrolled: rgba(255, 255, 255, 0.98);

    --color-input-bg: #ffffff;
    --color-input-bg-focus: hsl(40, 7.3%, 92%);
    --color-input-text: #334155;
    --color-input-border: #cbd5e1;

    --color-card-bg: #ffffff;
    --color-card-bg-hover: hsl(40, 7.3%, 92%);
    --color-card-popular-bg: rgba(205, 217, 238, 0.8);
}

/* --- DARK MODE OVERRIDES (Deep Ocean) --- */
[data-theme="dark"] {
    /* Color Palette - Premium "Deep Ocean" Tech Theme */
    --color-primary: #0F172A;
    --color-secondary: #1E293B;

    --color-accent: #38bdf8;
    --color-accent-hover: #0ea5e9;

    --color-text-main: #f1f5f9;
    --color-text-dim: #94a3b8;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --gradient-accent: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
    --gradient-glass: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.7));
    --gradient-overlay: linear-gradient(to bottom, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.8) 100%);
    --gradient-text-hero: linear-gradient(to bottom, #fff, #94a3b8);

    /* Effects */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.3);

    --glass-border: 1px solid rgba(255, 255, 255, 0.1);

    /* Semantic Component Colors */
    --color-header-bg: rgba(15, 23, 42, 0.7);
    --color-header-bg-scrolled: rgba(15, 23, 42, 0.9);

    --color-card-bg: rgba(30, 41, 59, 0.5);
    --color-card-bg-hover: rgba(30, 41, 59, 0.8);
    --color-card-popular-bg: rgba(30, 41, 59, 0.8);

    /* Input Colors */
    /* Input Colors (Forced White per user request) */
    --color-input-bg: #ffffff;
    --color-input-bg-focus: #f1f5f9;
    --color-input-text: #334155;
    --color-input-border: #cbd5e1;
}

/* Base Reset & Global Styles */
html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-main);
    background: var(--color-primary);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

::selection {
    background: var(--color-accent);
    color: var(--color-primary);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-primary);
}

/* --- Graphical Theme Toggle Switch --- */
.theme-switch {
    background-color: #87CEEB;
    /* Sky blue */
    border: none;
    cursor: pointer;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    width: 60px;
    height: 30px;
    transition: background-color 0.5s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Handle (Sun/Moon) */
.switch-handle {
    background-color: #FDB813;
    /* Sun yellow */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 3px;
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.5s ease;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Moon Craters (Hidden by default) */
.crater {
    background-color: #d4d4d8;
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.crater-1 {
    width: 5px;
    height: 5px;
    top: 4px;
    left: 10px;
}

.crater-2 {
    width: 3px;
    height: 3px;
    top: 12px;
    left: 14px;
}

.crater-3 {
    width: 4px;
    height: 4px;
    top: 15px;
    left: 6px;
}

/* Decorations (Features) */
.switch-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Clouds (Light Mode) */
.cloud {
    background: #fff;
    border-radius: 50%;
    position: absolute;
    opacity: 0.8;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.cloud-1 {
    width: 12px;
    height: 12px;
    top: 5px;
    right: 10px;
}

.cloud-2 {
    width: 10px;
    height: 10px;
    top: 12px;
    right: 4px;
}

.cloud-3 {
    width: 8px;
    height: 8px;
    top: 8px;
    right: 20px;
}

/* Stars (Dark Mode) */
.star {
    background: #fff;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.star-1 {
    width: 2px;
    height: 2px;
    top: 6px;
    left: 30px;
}

.star-2 {
    width: 1px;
    height: 1px;
    top: 18px;
    left: 25px;
}

.star-3 {
    width: 2px;
    height: 2px;
    top: 10px;
    left: 15px;
}

.star-4 {
    width: 1px;
    height: 1px;
    top: 5px;
    left: 45px;
}

.star-5 {
    width: 2px;
    height: 2px;
    top: 20px;
    left: 38px;
}

/* --- Dark Mode State --- */
[data-theme="dark"] .theme-switch {
    background-color: #1e293b;
    /* Night sky (slate-800) */
}

[data-theme="dark"] .switch-handle {
    transform: translateX(30px);
    background-color: #f4f4f5;
    /* Moon white (zinc-100) */
    box-shadow: inset -2px -1px 0 0 #e4e4e7;
}

[data-theme="dark"] .crater {
    opacity: 1;
}

[data-theme="dark"] .cloud {
    transform: translateY(20px);
    opacity: 0;
}

[data-theme="dark"] .star {
    opacity: 1;
    animation: twinkle 2s infinite ease-in-out alternate;
}

/* Individual star delays */
[data-theme="dark"] .star-2 {
    animation-delay: 0.5s;
}

[data-theme="dark"] .star-3 {
    animation-delay: 1.0s;
}

[data-theme="dark"] .star-4 {
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}