/* ===========================================
   1. VARIABLES & TOKENS (Expanded Themes)
   =========================================== */
:root {
    /* DEFAULT (Dark Theme) */
    /* DEFAULT (Dark Theme) - High Contrast & Premium Feel */
    --primary: #ff6b35;
    /* Signature Orange */
    --primary-hover: #e85d2b;
    --primary-light: rgba(255, 107, 53, 0.15);
    --primary-glow: rgba(255, 107, 53, 0.4);

    /* Semantic Colors - WCAG Compliant */
    --success: #10b981;
    /* Emerald Green */
    --success-hover: #059669;
    --success-light: rgba(16, 185, 129, 0.15);
    --success-glow: rgba(16, 185, 129, 0.4);

    --danger: #ef4444;
    /* Red */
    --danger-hover: #dc2626;
    --danger-light: rgba(239, 68, 68, 0.15);

    --warning: #f59e0b;
    /* Amber */
    --warning-hover: #d97706;
    --warning-light: rgba(245, 158, 11, 0.15);

    --info: #8b5cf6;
    /* Purple (AI/Special) */
    --info-hover: #7c3aed;
    --info-light: rgba(139, 92, 246, 0.15);
    --special: var(--info);
    /* Alias for 'special' features */

    /* Backgrounds & Surfaces */
    --bg: #0a0a0a;
    /* Deepest Black */
    --card: #1a1a1a;
    /* Dark Gray Surface */
    --input-bg: #262626;
    /* Slightly Lighter */

    /* Typography - High Contrast */
    --text: #ffffff;
    /* Primary Text */
    --text-light: #e5e5e5;
    /* Secondary Text (AA Compliant on Dark) */
    --text-muted: #a3a3a3;
    /* Muted Text (AA Compliant on Dark) */

    /* Borders & Depth */
    --border: #2a2a2a;
    /* Subtle Border */
    --border-light: #404040;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 15px var(--primary-glow);

    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Border radius - controlled by sharp edges setting */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);

    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --font-heading: 'Fredoka', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-bold: 700;

    --z-base: 1;
    --z-sticky: 20;
    --z-nav: 50;
    --z-modal-backdrop: 100;
    --z-modal: 101;
    --z-toast: 200;

    --tumbler-bg: linear-gradient(to bottom, #262626, #0a0a0a, #262626);
    --tumbler-highlight: #ffffff;
    --xp-gradient: linear-gradient(90deg, var(--primary), #fbbf24);
    --focus-gradient: linear-gradient(135deg, #8b5cf6, #c084fc);
}

/* 1. LIGHT THEME */
[data-theme="light"] {
    --bg: #f8fafc;
    --card: #ffffff;
    --input-bg: #f1f5f9;
    --text: #0f172a;
    --text-light: #334155;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-light: #cbd5e1;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --tumbler-bg: linear-gradient(to bottom, #e2e8f0, #f8fafc, #e2e8f0);
    --tumbler-highlight: var(--primary);
}

/* 2. MIDNIGHT (Deep Blue) */
[data-theme="midnight"] {
    --primary: #38bdf8;
    /* Sky Blue */
    --primary-hover: #0ea5e9;
    --bg: #0f172a;
    /* Slate 950 */
    --card: #1e293b;
    /* Slate 900 */
    --input-bg: #334155;
    /* Slate 800 */
    --text: #f8fafc;
    --text-light: #cbd5e1;
    --border: #475569;
    --tumbler-bg: linear-gradient(to bottom, #334155, #0f172a, #334155);
    --xp-gradient: linear-gradient(90deg, #38bdf8, #818cf8);
}

/* 3. FOREST (Nature Green) */
[data-theme="forest"] {
    --primary: #4ade80;
    /* Bright Green */
    --primary-hover: #22c55e;
    --bg: #022c22;
    /* Deep Forest */
    --card: #064e3b;
    /* Dark Green */
    --input-bg: #14532d;
    /* Green 900 */
    --text: #ecfdf5;
    --text-light: #a7f3d0;
    --border: #166534;
    --tumbler-bg: linear-gradient(to bottom, #14532d, #022c22, #14532d);
    --xp-gradient: linear-gradient(90deg, #4ade80, #facc15);
}

/* 4. SYNTHWAVE (Neon Purple/Pink) */
[data-theme="synthwave"] {
    --primary: #e879f9;
    /* Fuchsia */
    --primary-hover: #d946ef;
    --bg: #2e1065;
    /* Deep Purple */
    --card: #4c1d95;
    /* Violet */
    --input-bg: #5b21b6;
    /* Violet 800 */
    --text: #fae8ff;
    --text-light: #e9d5ff;
    --border: #7c3aed;
    --tumbler-bg: linear-gradient(to bottom, #5b21b6, #2e1065, #5b21b6);
    --xp-gradient: linear-gradient(90deg, #e879f9, #22d3ee);
    --primary-glow: rgba(232, 121, 249, 0.5);
}

/* 5. COFFEE (Warm Brown) */
[data-theme="coffee"] {
    --primary: #d4a373;
    /* Latte */
    --primary-hover: #c59265;
    --bg: #26201b;
    /* Espresso */
    --card: #3d3228;
    /* Mocha */
    --input-bg: #544439;
    /* Cappuccino */
    --text: #faedcd;
    /* Cream */
    --text-light: #e3d5c6;
    --border: #706257;
    --tumbler-bg: linear-gradient(to bottom, #544439, #26201b, #544439);
    --xp-gradient: linear-gradient(90deg, #d4a373, #a3b18a);
}

/* Sharp edges mode - set border-radius to 0 */
[data-sharp-edges="true"] {
    --border-radius-sm: 0;
    --border-radius-md: 0;
    --border-radius-lg: 0;
    --border-radius-xl: 0;
}

/* GLOBAL ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUpFade {
    from {
        transform: translateY(15px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    60% {
        transform: scale(1.02);
    }

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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}