/* ============================================================
   BRAINFLOOD THEME SYSTEM
   ============================================================
   Three-tier CSS variable architecture:
   - Tier 1: Primitives (change per theme)
   - Tier 2: Semantic tokens (stable names referencing primitives)
   - Tier 3: Component tokens (commonly repeated patterns)
   ============================================================ */

/* ============================================================
   TIER 1: PRIMITIVE PALETTE — MIDNIGHT (DEFAULT)
   ============================================================ */
:root,
[data-theme="midnight"] {
    /* Background scale */
    --color-base-darkest: #070b1a;
    --color-base-dark: #0f172a;
    --color-base-mid: #1e293b;
    --color-base-darkest-rgb: 7, 11, 26;

    /* Glass overlay direction: white for dark themes */
    --glass-overlay-color: 255, 255, 255;
    --glass-overlay-color-inv: 0, 0, 0;

    /* Text scale */
    --color-text-100: #e2e8f0;
    --color-text-200: #cbd5e1;
    --color-text-300: #94a3b8;
    --color-text-400: #64748b;
    --color-text-500: #475569;

    /* Accent: Primary (purple) */
    --color-accent: #7c3aed;
    --color-accent-dark: #6d28d9;
    --color-accent-light: #a78bfa;
    --accent-rgb: 124, 58, 237;

    /* Accent: Secondary (cyan) */
    --color-secondary: #22d3ee;
    --color-secondary-dark: #06b6d4;
    --secondary-rgb: 34, 211, 238;

    /* Status: Success (green) */
    --color-success: #34d399;
    --color-success-dark: #10b981;
    --color-success-darker: #059669;
    --color-success-light: #6ee7b7;
    --success-rgb: 52, 211, 153;

    /* Status: Danger (red) */
    --color-danger: #f87171;
    --color-danger-dark: #ef4444;
    --color-danger-darker: #dc2626;
    --color-danger-darkest: #b91c1c;
    --color-danger-light: #fca5a5;
    --danger-rgb: 239, 68, 68;

    /* Status: Warning (yellow/amber) */
    --color-warning: #fbbf24;
    --color-warning-dark: #f59e0b;
    --warning-rgb: 251, 191, 36;

    /* Status: Info (blue) */
    --color-info: #60a5fa;
    --color-info-dark: #3b82f6;
    --info-rgb: 96, 165, 250;

    /* Special colors */
    --color-pink: #f472b6;
    --pink-rgb: 244, 114, 182;
    --color-gray: #9ca3af;
    --gray-rgb: 156, 163, 175;
    --color-bronze: #cd7f32;

    /* Ambient glow (for radial background gradients) */
    --glow-primary: rgba(124, 58, 237, 0.3);
    --glow-secondary: rgba(34, 211, 238, 0.12);
    --glow-tertiary: rgba(244, 114, 182, 0.08);
}


/* ============================================================
   TIER 2: SEMANTIC TOKENS
   ============================================================ */
:root,
[data-theme="midnight"] {
    /* Backgrounds */
    --bg-primary: var(--color-base-darkest);
    --bg-secondary: var(--color-base-dark);
    --bg-tertiary: var(--color-base-mid);

    /* Text */
    --text-primary: var(--color-text-100);
    --text-secondary: var(--color-text-300);
    --text-muted: var(--color-text-400);

    /* Accent shortcuts (backward compatible) */
    --accent: var(--color-accent);
    --accent-dark: var(--color-accent-dark);
    --accent-light: var(--color-accent-light);
    --purple: var(--color-accent);
    --purple-dark: var(--color-accent-dark);
    --cyan: var(--color-secondary);
    --green: var(--color-success);
    --red: var(--color-danger);
    --yellow: var(--color-warning);

    /* Links */
    --link-color: var(--color-secondary);
    --link-hover: var(--color-secondary-dark);

    /* Borders */
    --border-color: rgba(var(--glass-overlay-color), 0.08);
    --divider-color: rgba(var(--glass-overlay-color), 0.06);
}


/* ============================================================
   TIER 3: COMPONENT TOKENS
   ============================================================ */
:root,
[data-theme="midnight"] {
    /* Glass cards */
    --card-bg: rgba(var(--glass-overlay-color), 0.03);
    --card-border: 1px solid rgba(var(--glass-overlay-color), 0.06);
    --card-hover-bg: rgba(var(--glass-overlay-color), 0.05);
    --card-hover-border-color: rgba(var(--glass-overlay-color), 0.12);

    /* Inputs */
    --input-bg: rgba(var(--glass-overlay-color), 0.05);
    --input-border: 1px solid rgba(var(--glass-overlay-color), 0.1);
    --input-focus-bg: rgba(var(--glass-overlay-color), 0.08);
    --input-focus-border-color: var(--accent);

    /* Buttons */
    --btn-secondary-bg: rgba(var(--glass-overlay-color), 0.05);
    --btn-secondary-border: 1px solid rgba(var(--glass-overlay-color), 0.1);
    --btn-secondary-hover-bg: rgba(var(--glass-overlay-color), 0.1);

    /* Modal */
    --modal-overlay-bg: rgba(var(--glass-overlay-color-inv), 0.7);
    --modal-bg: var(--bg-secondary);
    --modal-border: 1px solid rgba(var(--glass-overlay-color), 0.1);

    /* Navbar */
    --navbar-bg: rgba(var(--color-base-darkest-rgb), 0.95);
    --navbar-border: 1px solid rgba(var(--glass-overlay-color), 0.08);

    /* Status badges */
    --badge-success-bg: rgba(var(--success-rgb), 0.15);
    --badge-success-color: var(--color-success);
    --badge-success-border: 1px solid rgba(var(--success-rgb), 0.3);

    --badge-danger-bg: rgba(var(--danger-rgb), 0.15);
    --badge-danger-color: var(--color-danger);
    --badge-danger-border: 1px solid rgba(var(--danger-rgb), 0.3);

    --badge-warning-bg: rgba(var(--warning-rgb), 0.15);
    --badge-warning-color: var(--color-warning);
    --badge-warning-border: 1px solid rgba(var(--warning-rgb), 0.3);

    --badge-info-bg: rgba(var(--info-rgb), 0.15);
    --badge-info-color: var(--color-info);
    --badge-info-border: 1px solid rgba(var(--info-rgb), 0.3);

    --badge-accent-bg: rgba(var(--accent-rgb), 0.15);
    --badge-accent-color: var(--color-accent-light);
    --badge-accent-border: 1px solid rgba(var(--accent-rgb), 0.3);

    --badge-gray-bg: rgba(var(--gray-rgb), 0.15);
    --badge-gray-color: var(--color-gray);
    --badge-gray-border: 1px solid rgba(var(--gray-rgb), 0.3);

    /* Backdrop */
    --backdrop-blur: blur(12px);
}


/* ============================================================
   SHARED UTILITY CLASSES
   ============================================================ */

/* Hero gradient background (used on standalone pages) */
.hero-gradient {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, var(--glow-primary) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 50%, var(--glow-secondary) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 80%, var(--glow-tertiary) 0%, transparent 50%);
}

/* Smooth theme transition (added by JS during switch) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease !important;
}

/* Floating theme toggle (for standalone pages without navbar) */
.theme-float-wrapper {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.theme-float-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(var(--glass-overlay-color), 0.12);
    background: rgba(var(--glass-overlay-color), 0.06);
    backdrop-filter: blur(12px);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.theme-float-btn:hover {
    background: rgba(var(--glass-overlay-color), 0.12);
    color: var(--text-primary);
    transform: scale(1.05);
}

.theme-float-panel {
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(var(--glass-overlay-color), 0.1);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(var(--glass-overlay-color-inv), 0.3);
}

.theme-float-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.theme-float-swatch:hover {
    transform: scale(1.15);
}

.theme-float-swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
}


/* ============================================================
   THEME: OBSIDIAN — True black AMOLED + neon green/cyan
   ============================================================ */
[data-theme="obsidian"] {
    --color-base-darkest: #000000;
    --color-base-dark: #0a0a0a;
    --color-base-mid: #141414;
    --color-base-darkest-rgb: 0, 0, 0;

    --glass-overlay-color: 255, 255, 255;
    --glass-overlay-color-inv: 0, 0, 0;

    --color-text-100: #e0e0e0;
    --color-text-200: #b0b0b0;
    --color-text-300: #888888;
    --color-text-400: #555555;
    --color-text-500: #383838;

    --color-accent: #00e87b;
    --color-accent-dark: #00c468;
    --color-accent-light: #66ffbb;
    --accent-rgb: 0, 232, 123;

    --color-secondary: #00d4ff;
    --color-secondary-dark: #00a8cc;
    --secondary-rgb: 0, 212, 255;

    --glow-primary: rgba(0, 232, 123, 0.2);
    --glow-secondary: rgba(0, 212, 255, 0.1);
    --glow-tertiary: rgba(255, 0, 128, 0.06);
}


/* ============================================================
   THEME: EMBER — Dark warm tones + orange/coral
   ============================================================ */
[data-theme="ember"] {
    --color-base-darkest: #1a0f0a;
    --color-base-dark: #2a1810;
    --color-base-mid: #3d261c;
    --color-base-darkest-rgb: 26, 15, 10;

    --glass-overlay-color: 255, 230, 210;
    --glass-overlay-color-inv: 15, 8, 4;

    --color-text-100: #fde8d8;
    --color-text-200: #e0c4ae;
    --color-text-300: #c4a68e;
    --color-text-400: #8a7060;
    --color-text-500: #6b5548;

    --color-accent: #f97316;
    --color-accent-dark: #ea580c;
    --color-accent-light: #fb923c;
    --accent-rgb: 249, 115, 22;

    --color-secondary: #f472b6;
    --color-secondary-dark: #ec4899;
    --secondary-rgb: 244, 114, 182;

    --glow-primary: rgba(249, 115, 22, 0.25);
    --glow-secondary: rgba(244, 114, 182, 0.12);
    --glow-tertiary: rgba(251, 191, 36, 0.08);
}


/* ============================================================
   THEME: ARCTIC — Cool light mode + indigo/teal
   ============================================================ */
[data-theme="arctic"] {
    --color-base-darkest: #f0f4f8;
    --color-base-dark: #e2e8f0;
    --color-base-mid: #cbd5e1;
    --color-base-darkest-rgb: 240, 244, 248;

    --glass-overlay-color: 15, 23, 42;
    --glass-overlay-color-inv: 255, 255, 255;

    --color-text-100: #1e293b;
    --color-text-200: #334155;
    --color-text-300: #475569;
    --color-text-400: #64748b;
    --color-text-500: #94a3b8;

    --color-accent: #4f46e5;
    --color-accent-dark: #4338ca;
    --color-accent-light: #818cf8;
    --accent-rgb: 79, 70, 229;

    --color-secondary: #0891b2;
    --color-secondary-dark: #0e7490;
    --secondary-rgb: 8, 145, 178;

    /* Adjusted status colors for light backgrounds */
    --color-success: #059669;
    --color-success-dark: #047857;
    --color-success-darker: #065f46;
    --color-success-light: #10b981;
    --success-rgb: 5, 150, 105;

    --color-danger: #dc2626;
    --color-danger-dark: #b91c1c;
    --color-danger-darker: #991b1b;
    --color-danger-darkest: #7f1d1d;
    --color-danger-light: #ef4444;
    --danger-rgb: 220, 38, 38;

    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --warning-rgb: 217, 119, 6;

    --color-info: #2563eb;
    --color-info-dark: #1d4ed8;
    --info-rgb: 37, 99, 235;

    --color-gray: #6b7280;
    --gray-rgb: 107, 114, 128;

    --glow-primary: rgba(79, 70, 229, 0.12);
    --glow-secondary: rgba(8, 145, 178, 0.08);
    --glow-tertiary: rgba(236, 72, 153, 0.05);

    /* Light theme overrides for component tokens */
    --modal-bg: #f8fafc;
    --navbar-bg: rgba(240, 244, 248, 0.92);
}


/* ============================================================
   THEME: IVORY — Warm light mode + amber/teal
   ============================================================ */
[data-theme="ivory"] {
    --color-base-darkest: #faf8f5;
    --color-base-dark: #f0ebe4;
    --color-base-mid: #e0d8ce;
    --color-base-darkest-rgb: 250, 248, 245;

    --glass-overlay-color: 60, 40, 20;
    --glass-overlay-color-inv: 250, 248, 245;

    --color-text-100: #2d2418;
    --color-text-200: #4a3f30;
    --color-text-300: #6b5d4e;
    --color-text-400: #8c7e6e;
    --color-text-500: #a89888;

    --color-accent: #b45309;
    --color-accent-dark: #92400e;
    --color-accent-light: #d97706;
    --accent-rgb: 180, 83, 9;

    --color-secondary: #0d9488;
    --color-secondary-dark: #0f766e;
    --secondary-rgb: 13, 148, 136;

    /* Adjusted status colors for light backgrounds */
    --color-success: #059669;
    --color-success-dark: #047857;
    --color-success-darker: #065f46;
    --color-success-light: #10b981;
    --success-rgb: 5, 150, 105;

    --color-danger: #dc2626;
    --color-danger-dark: #b91c1c;
    --color-danger-darker: #991b1b;
    --color-danger-darkest: #7f1d1d;
    --color-danger-light: #ef4444;
    --danger-rgb: 220, 38, 38;

    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --warning-rgb: 217, 119, 6;

    --color-info: #2563eb;
    --color-info-dark: #1d4ed8;
    --info-rgb: 37, 99, 235;

    --color-gray: #6b7280;
    --gray-rgb: 107, 114, 128;

    --glow-primary: rgba(180, 83, 9, 0.1);
    --glow-secondary: rgba(13, 148, 136, 0.06);
    --glow-tertiary: rgba(220, 38, 38, 0.04);

    /* Light theme overrides for component tokens */
    --modal-bg: #faf8f5;
    --navbar-bg: rgba(250, 248, 245, 0.92);
}

/* ============================================================
   GLOBAL SELECT DARK OPTIONS
   ============================================================
   Browsers render <option> elements with their own white bg.
   Force dark bg/text so dropdowns match the theme.
   ============================================================ */
select option {
    background: var(--bg-secondary, #1a1a2e);
    color: var(--text-primary, #e2e8f0);
}