/* ============================================
   THEME SYSTEM - Premium Aesthetic Themes
   ============================================ */

/* THEME 1: Cyber Neon (Default) */
:root[data-theme="neon"],
:root:not([data-theme]) {
    --accent-primary: #00f0ff;
    --accent-primary-hover: #5cffff;
    --accent-primary-glow: rgba(0, 240, 255, 0.3);
    --accent-secondary: #7000ff;
    --accent-tertiary: #b026ff;
    --theme-color-light: rgba(0, 240, 255, 0.1);
    --theme-border: rgba(0, 240, 255, 0.3);
}

/* THEME 2: Synthwave Pink */
:root[data-theme="synthwave"] {
    --accent-primary: #ff007f;
    --accent-primary-hover: #ff4da6;
    --accent-primary-glow: rgba(255, 0, 127, 0.3);
    --accent-secondary: #7000ff;
    --accent-tertiary: #ff00ff;
    --theme-color-light: rgba(255, 0, 127, 0.1);
    --theme-border: rgba(255, 0, 127, 0.3);
}

/* THEME 3: Crimson Void */
:root[data-theme="crimson"] {
    --accent-primary: #ff1e3c;
    --accent-primary-hover: #ff5c77;
    --accent-primary-glow: rgba(255, 30, 60, 0.3);
    --accent-secondary: #99001c;
    --accent-tertiary: #cc002e;
    --theme-color-light: rgba(255, 30, 60, 0.1);
    --theme-border: rgba(255, 30, 60, 0.3);
}

/* THEME 4: Toxic Emerald */
:root[data-theme="emerald"] {
    --accent-primary: #00ff66;
    --accent-primary-hover: #4dff94;
    --accent-primary-glow: rgba(0, 255, 102, 0.3);
    --accent-secondary: #008033;
    --accent-tertiary: #00b347;
    --theme-color-light: rgba(0, 255, 102, 0.1);
    --theme-border: rgba(0, 255, 102, 0.3);
}

/* THEME 5: Deep Amethyst */
:root[data-theme="purple"] {
    --accent-primary: #a100ff;
    --accent-primary-hover: #c44dff;
    --accent-primary-glow: rgba(161, 0, 255, 0.3);
    --accent-secondary: #4a0080;
    --accent-tertiary: #7300cc;
    --theme-color-light: rgba(161, 0, 255, 0.1);
    --theme-border: rgba(161, 0, 255, 0.3);
}

/* THEME 6: Solar Flare */
:root[data-theme="solar"] {
    --accent-primary: #ff9900;
    --accent-primary-hover: #ffb84d;
    --accent-primary-glow: rgba(255, 153, 0, 0.3);
    --accent-secondary: #cc2900;
    --accent-tertiary: #ff471a;
    --theme-color-light: rgba(255, 153, 0, 0.1);
    --theme-border: rgba(255, 153, 0, 0.3);
}

/* THEME 7: Light Mode (Glassmorphic) */
:root[data-theme="light"] {
    /* Base Inversions */
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-tertiary: #e2e8f0;

    --text-primary: #0f172a;
    --text-secondary: rgba(15, 23, 42, 0.75);
    --text-tertiary: rgba(15, 23, 42, 0.5);

    /* Glass and Borders */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-hover: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-frosted: rgba(240, 244, 248, 0.85);
    --glass-solid: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);

    /* Text Gradients for Light Mode */
    --text-gradient-primary: linear-gradient(180deg, #020617 0%, rgba(2, 6, 23, 0.7) 100%);
    --text-gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);

    /* Accent (Sleek Obsidian/Blue) */
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-primary-glow: rgba(59, 130, 246, 0.3);
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #1e3a8a;
    --theme-color-light: rgba(59, 130, 246, 0.15);
    --theme-border: rgba(59, 130, 246, 0.4);

    /* Shadows for Light Mode */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);

    /* Gradients */
    --header-gradient: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(248, 250, 252, 0) 100%);
    --hero-gradient: radial-gradient(circle at 50% 0%,
            rgba(59, 130, 246, 0.15) 0%,
            rgba(139, 92, 246, 0.05) 40%,
            transparent 80%);
}

/* Apply theme colors to accent gradient */
:root {
    --accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

/* Theme-aware glitch effect for buttons and interactive elements */
button,
.btn,
a.button {
    border-color: var(--theme-border);
}

button:hover,
.btn:hover,
a.button:hover {
    background: var(--theme-color-light);
    border-color: var(--accent-primary);
}

/* Theme transitions */
:root {
    transition: --accent-primary 0.4s ease,
        --accent-primary-hover 0.4s ease,
        --accent-secondary 0.4s ease,
        --bg-primary 0.6s ease,
        --bg-secondary 0.6s ease;
}