/* ================================================================
   JOLLY GRID - UNIFIED THEME SYSTEM
   Theme variables for both Light and Dark modes
   Works across all pages with theme toggle
   ================================================================ */

/* Typography — Plus Jakarta Sans for headings (same as the home page), Lexend for reading text:
   Lexend was designed to improve reading fluency, which suits K-12. */
:root {
    --font-display: 'Plus Jakarta Sans', 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ========================================
   DARK THEME (Default)
   ======================================== */
:root,
[data-theme="dark"] {
    /* Base colors */
    --bg-primary: #080c18;
    --bg-secondary: #0c1424;
    --bg-tertiary: #121a2e;
    --bg-card: rgba(18, 22, 32, 0.75);
    --bg-elevated: rgba(24, 28, 40, 0.88);
    --bg-elevated-hover: rgba(32, 38, 54, 0.95);
    --bg-glass: rgba(12, 18, 36, 0.85);
    
    /* Text colors */
    --text-primary: #f8fafc;
    --text-secondary: rgba(248, 250, 252, 0.88);
    --text-muted: rgba(248, 250, 252, 0.65);
    --text-subtle: rgba(248, 250, 252, 0.45);
    
    /* Calm & Classroom brand palette */
    --brand-primary: #4ea8e6;
    --brand-primary-strong: #1f6fb2;
    --brand-secondary: #4fd1b9;
    --brand-secondary-strong: #0f8f7c;
    --brand-highlight: #f3b89a;
    --brand-highlight-strong: #f07b4f;
    --brand-primary-05: rgba(78, 168, 230, 0.05);
    --brand-primary-08: rgba(78, 168, 230, 0.08);
    --brand-primary-10: rgba(78, 168, 230, 0.1);
    --brand-primary-15: rgba(78, 168, 230, 0.15);
    --brand-primary-20: rgba(78, 168, 230, 0.2);
    --brand-primary-30: rgba(78, 168, 230, 0.3);
    --brand-primary-40: rgba(78, 168, 230, 0.4);
    --brand-primary-50: rgba(78, 168, 230, 0.5);

    /* Legacy aliases retained while app-specific styles migrate. */
    --accent-purple: var(--brand-primary);
    --accent-pink: var(--brand-highlight-strong);
    --jg-rule: rgba(78, 168, 230, 0.08);
    --jg-stage: #0e1b2c;
    --jg-stage-tint: #16304a;
    --jg-stage-grid: rgba(255, 255, 255, 0.045);
    --jg-stage-glow-1: #1b3552;
    --jg-stage-glow-2: rgba(255, 107, 74, 0.16);
    --jg-accent: #7cc0f4;
    --jg-sun-cta: #ffc940;
    --jg-cta-ink: #0e1b2c;
    /* The landing page's stage: a soft sky glow, a warm glow and blue graph lines */
    --jg-stage-surface:
        radial-gradient(60% 80% at 88% 20%, var(--jg-stage-glow-1), transparent 70%),
        radial-gradient(50% 70% at 0% 100%, var(--jg-stage-glow-2), transparent 70%),
        linear-gradient(var(--jg-stage-grid) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, var(--jg-stage-grid) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--jg-stage);
    --accent-cyan: #22d3ee;
    --accent-green: #34d399;
    --accent-orange: #fb923c;
    --accent-yellow: #fcd34d;
    --accent-blue: #60a5fa;
    --accent-red: #f87171;
    
    /* Accent color opacity variants */
    --accent-purple-05: var(--brand-primary-05);
    --accent-purple-08: var(--brand-primary-08);
    --accent-purple-10: var(--brand-primary-10);
    --accent-purple-15: var(--brand-primary-15);
    --accent-purple-20: var(--brand-primary-20);
    --accent-purple-30: var(--brand-primary-30);
    --accent-purple-40: var(--brand-primary-40);
    --accent-purple-50: var(--brand-primary-50);
    
    --accent-pink-05: rgba(240, 123, 79, 0.05);
    --accent-pink-08: rgba(240, 123, 79, 0.08);
    --accent-pink-10: rgba(240, 123, 79, 0.1);
    --accent-pink-15: rgba(240, 123, 79, 0.15);
    --accent-pink-20: rgba(240, 123, 79, 0.2);
    --accent-pink-30: rgba(240, 123, 79, 0.3);
    --accent-pink-40: rgba(240, 123, 79, 0.4);
    
    --accent-cyan-05: rgba(6, 182, 212, 0.05);
    --accent-cyan-10: rgba(6, 182, 212, 0.1);
    --accent-cyan-15: rgba(6, 182, 212, 0.15);
    --accent-cyan-20: rgba(6, 182, 212, 0.2);
    --accent-cyan-30: rgba(6, 182, 212, 0.3);
    --accent-cyan-40: rgba(6, 182, 212, 0.4);
    
    --accent-green-05: rgba(16, 185, 129, 0.05);
    --accent-green-08: rgba(16, 185, 129, 0.08);
    --accent-green-10: rgba(16, 185, 129, 0.1);
    --accent-green-15: rgba(16, 185, 129, 0.15);
    --accent-green-20: rgba(16, 185, 129, 0.2);
    --accent-green-25: rgba(16, 185, 129, 0.25);
    --accent-green-30: rgba(16, 185, 129, 0.3);
    --accent-green-40: rgba(16, 185, 129, 0.4);
    
    --accent-orange-05: rgba(249, 115, 22, 0.05);
    --accent-orange-10: rgba(249, 115, 22, 0.1);
    --accent-orange-15: rgba(249, 115, 22, 0.15);
    --accent-orange-20: rgba(249, 115, 22, 0.2);
    --accent-orange-30: rgba(249, 115, 22, 0.3);
    --accent-orange-40: rgba(249, 115, 22, 0.4);
    
    --accent-yellow-20: rgba(252, 211, 77, 0.2);
    --accent-yellow-30: rgba(252, 211, 77, 0.3);
    --accent-yellow-40: rgba(252, 211, 77, 0.4);
    
    --accent-red-20: rgba(239, 68, 68, 0.2);
    
    /* Primary accent aliases (for component compatibility) */
    --accent-primary: var(--brand-primary);
    --accent-primary-hover: var(--brand-primary-strong);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--brand-primary-strong), var(--brand-secondary-strong));
    --gradient-secondary: linear-gradient(135deg, var(--brand-secondary-strong), var(--brand-primary-strong));
    --gradient-warm: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow));
    --gradient-cool: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    
    /* Background mesh gradients */
    --gradient-mesh-1: radial-gradient(at 40% 20%, rgba(78, 168, 230, 0.22) 0px, transparent 50%);
    --gradient-mesh-2: radial-gradient(at 80% 0%, rgba(79, 209, 185, 0.14) 0px, transparent 50%);
    --gradient-mesh-3: radial-gradient(at 0% 50%, rgba(243, 184, 154, 0.12) 0px, transparent 50%);
    --gradient-mesh-4: radial-gradient(at 80% 50%, rgba(79, 209, 185, 0.09) 0px, transparent 50%);
    --gradient-mesh-5: radial-gradient(at 0% 100%, rgba(243, 184, 154, 0.12) 0px, transparent 50%);
    
    /* Borders */
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.2);
    --border-accent: rgba(78, 168, 230, 0.3);
    
    /* Shadows - refined for elegance */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.20);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-glow-purple: 0 6px 32px rgba(78, 168, 230, 0.30), 0 0 16px rgba(78, 168, 230, 0.15);
    --shadow-glow-pink: 0 6px 32px rgba(243, 184, 154, 0.26), 0 0 16px rgba(243, 184, 154, 0.13);
    --shadow-glow-cyan: 0 6px 32px rgba(34, 211, 238, 0.30), 0 0 16px rgba(34, 211, 238, 0.15);
    
    /* Glass morphism */
    --glass-bg: rgba(12, 18, 36, 0.7);
    --glass-border: rgba(248, 250, 252, 0.08);
    --glass-blur: blur(24px);
    
    /* Component specific */
    --header-bg: #080c18;
    --footer-bg: linear-gradient(to bottom, #050810, #030508);
    --card-bg: rgba(18, 22, 32, 0.75);
    --input-bg: rgba(248, 250, 252, 0.04);
    --input-border: rgba(248, 250, 252, 0.08);
    --input-focus-border: var(--accent-purple);
    
    /* Button styles */
    --btn-primary-bg: var(--brand-primary-strong);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: rgba(255, 255, 255, 0.3);
    --btn-secondary-text: #ffffff;
    
    /* Status colors */
    --success-bg: rgba(16, 185, 129, 0.15);
    --success-border: rgba(16, 185, 129, 0.3);
    --success-text: #10b981;
    --warning-bg: rgba(251, 191, 36, 0.15);
    --warning-border: rgba(251, 191, 36, 0.3);
    --warning-text: #fbbf24;
    --error-bg: rgba(239, 68, 68, 0.15);
    --error-border: rgba(239, 68, 68, 0.3);
    --error-text: #ef4444;
    --info-bg: rgba(59, 130, 246, 0.15);
    --info-border: rgba(59, 130, 246, 0.3);
    --info-text: #3b82f6;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* Scrollbar */
    --scrollbar-track: rgba(255, 255, 255, 0.05);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(78, 168, 230, 0.5);
    
    /* Sidebar - Navy blue to match header */
    --sidebar-bg: rgba(8, 12, 24, 0.92);
    --sidebar-header-bg: #080c18;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.6);
    --sidebar-item-hover: rgba(78, 168, 230, 0.15);
    --sidebar-item-active-bg: rgba(78, 168, 230, 0.12);
    --sidebar-item-active-border: rgba(78, 168, 230, 0.25);
    --sidebar-icon-bg: rgba(255, 255, 255, 0.03);
    --sidebar-icon-border: rgba(255, 255, 255, 0.05);
    --sidebar-toggle-border: rgba(255, 255, 255, 0.08);
    --sidebar-toggle-hover-bg: rgba(255, 255, 255, 0.08);
    
    /* Theme toggle icon - In dark mode, show sun to switch to light */
    --theme-icon-display-sun: block;
    --theme-icon-display-moon: none;
}

/* ========================================
   LIGHT THEME
   ======================================== */
[data-theme="light"] {
    /* Base colors - cool exercise-book paper */
    --bg-primary: #fbfcfd;
    --bg-secondary: #f4f7fa;
    --bg-tertiary: #ebf0f5;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-elevated-hover: #f8fafc;
    --bg-glass: rgba(255, 255, 255, 0.88);
    
    /* Text colors */
    --text-primary: #16232f;
    --text-secondary: #3b4a58;
    --text-muted: #5b6b7a;
    --text-subtle: #8d9aa6;
    --jg-rule: rgba(31, 111, 178, 0.09);
    --jg-stage: #f3f8fd;
    --jg-stage-tint: #e2eefa;
    --jg-stage-grid: rgba(31, 111, 178, 0.07);
    --jg-stage-glow-1: rgba(78, 168, 230, 0.26);
    --jg-stage-glow-2: rgba(255, 201, 64, 0.22);
    --jg-accent: #1f6fb2;
    --jg-sun-cta: #ffc940;
    --jg-cta-ink: #0e1b2c;
    --jg-stage-surface:
        radial-gradient(60% 80% at 88% 20%, var(--jg-stage-glow-1), transparent 70%),
        radial-gradient(50% 70% at 0% 100%, var(--jg-stage-glow-2), transparent 70%),
        linear-gradient(var(--jg-stage-grid) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, var(--jg-stage-grid) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--jg-stage);
    
    /* Calm & Classroom brand palette */
    --brand-primary: #1f6fb2;
    --brand-primary-strong: #1a5690;
    --brand-secondary: #0f8f7c;
    --brand-secondary-strong: #0d7466;
    --brand-highlight: #f3b89a;
    --brand-highlight-strong: #a94f2f;
    --brand-primary-05: rgba(31, 111, 178, 0.05);
    --brand-primary-08: rgba(31, 111, 178, 0.08);
    --brand-primary-10: rgba(31, 111, 178, 0.1);
    --brand-primary-15: rgba(31, 111, 178, 0.15);
    --brand-primary-20: rgba(31, 111, 178, 0.2);
    --brand-primary-30: rgba(31, 111, 178, 0.3);
    --brand-primary-40: rgba(31, 111, 178, 0.4);
    --brand-primary-50: rgba(31, 111, 178, 0.5);

    /* Legacy aliases retained while app-specific styles migrate. */
    --accent-purple: var(--brand-primary);
    --accent-pink: var(--brand-highlight-strong);
    --accent-cyan: #06b6d4;
    --accent-green: #10b981;
    --accent-orange: #f97316;
    --accent-yellow: #eab308;
    --accent-blue: #3b82f6;
    --accent-red: #ef4444;
    
    /* Accent color opacity variants */
    --accent-purple-05: var(--brand-primary-05);
    --accent-purple-08: var(--brand-primary-08);
    --accent-purple-10: var(--brand-primary-10);
    --accent-purple-15: var(--brand-primary-15);
    --accent-purple-20: var(--brand-primary-20);
    --accent-purple-30: var(--brand-primary-30);
    --accent-purple-40: var(--brand-primary-40);
    --accent-purple-50: var(--brand-primary-50);
    
    --accent-pink-05: rgba(169, 79, 47, 0.05);
    --accent-pink-08: rgba(169, 79, 47, 0.08);
    --accent-pink-10: rgba(169, 79, 47, 0.1);
    --accent-pink-15: rgba(169, 79, 47, 0.15);
    --accent-pink-20: rgba(169, 79, 47, 0.2);
    --accent-pink-30: rgba(169, 79, 47, 0.3);
    --accent-pink-40: rgba(169, 79, 47, 0.4);
    
    --accent-cyan-05: rgba(8, 145, 178, 0.05);
    --accent-cyan-10: rgba(8, 145, 178, 0.1);
    --accent-cyan-15: rgba(8, 145, 178, 0.15);
    --accent-cyan-20: rgba(8, 145, 178, 0.2);
    --accent-cyan-30: rgba(8, 145, 178, 0.3);
    --accent-cyan-40: rgba(8, 145, 178, 0.4);
    
    --accent-green-05: rgba(5, 150, 105, 0.05);
    --accent-green-08: rgba(5, 150, 105, 0.08);
    --accent-green-10: rgba(5, 150, 105, 0.1);
    --accent-green-15: rgba(5, 150, 105, 0.15);
    --accent-green-20: rgba(5, 150, 105, 0.2);
    --accent-green-25: rgba(5, 150, 105, 0.25);
    --accent-green-30: rgba(5, 150, 105, 0.3);
    --accent-green-40: rgba(5, 150, 105, 0.4);
    
    --accent-orange-05: rgba(234, 88, 12, 0.05);
    --accent-orange-10: rgba(234, 88, 12, 0.1);
    --accent-orange-15: rgba(234, 88, 12, 0.15);
    --accent-orange-20: rgba(234, 88, 12, 0.2);
    --accent-orange-30: rgba(234, 88, 12, 0.3);
    --accent-orange-40: rgba(234, 88, 12, 0.4);
    
    --accent-yellow-20: rgba(202, 138, 4, 0.2);
    --accent-yellow-30: rgba(202, 138, 4, 0.3);
    --accent-yellow-40: rgba(202, 138, 4, 0.4);
    
    --accent-red-20: rgba(220, 38, 38, 0.2);
    
    /* Primary accent aliases (for component compatibility) */
    --accent-primary: var(--brand-primary);
    --accent-primary-hover: var(--brand-primary-strong);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--brand-primary-strong), var(--brand-secondary-strong));
    --gradient-secondary: linear-gradient(135deg, var(--brand-secondary-strong), var(--brand-primary-strong));
    --gradient-warm: linear-gradient(135deg, var(--accent-orange), var(--accent-yellow));
    --gradient-cool: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    
    /* Background mesh gradients - MORE VISIBLE for premium feel */
    --gradient-mesh-1: radial-gradient(at 40% 20%, rgba(31, 111, 178, 0.16) 0px, transparent 50%);
    --gradient-mesh-2: radial-gradient(at 80% 0%, rgba(79, 209, 185, 0.12) 0px, transparent 50%);
    --gradient-mesh-3: radial-gradient(at 0% 50%, rgba(243, 184, 154, 0.11) 0px, transparent 50%);
    --gradient-mesh-4: radial-gradient(at 80% 50%, rgba(79, 209, 185, 0.09) 0px, transparent 50%);
    --gradient-mesh-5: radial-gradient(at 0% 100%, rgba(243, 184, 154, 0.1) 0px, transparent 50%);
    
    /* Borders - subtle with accent tint */
    --border-light: rgba(31, 111, 178, 0.08);
    --border-medium: rgba(31, 111, 178, 0.12);
    --border-strong: rgba(31, 111, 178, 0.18);
    --border-accent: rgba(31, 111, 178, 0.35);
    
    /* Shadows - STRONGER for premium depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(31, 111, 178, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(31, 111, 178, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10), 0 12px 40px rgba(31, 111, 178, 0.08);
    --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.12), 0 24px 60px rgba(31, 111, 178, 0.10);
    --shadow-glow-purple: 0 6px 24px rgba(31, 111, 178, 0.20), 0 12px 40px rgba(31, 111, 178, 0.12);
    --shadow-glow-pink: 0 6px 24px rgba(243, 184, 154, 0.20), 0 12px 40px rgba(243, 184, 154, 0.12);
    --shadow-glow-cyan: 0 6px 24px rgba(6, 182, 212, 0.20), 0 12px 40px rgba(6, 182, 212, 0.12);
    
    /* Glass morphism */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-blur: blur(24px);
    
    /* Component specific */
    --header-bg: #ffffff;
    --footer-bg: linear-gradient(to bottom, #fafbfc, #f3f4f6);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: rgba(0, 0, 0, 0.08);
    --input-focus-border: var(--accent-purple);
    
    /* Button styles */
    --btn-primary-bg: var(--brand-primary-strong);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: rgba(0, 0, 0, 0.2);
    --btn-secondary-text: var(--text-primary);
    
    /* Status colors */
    --success-bg: rgba(5, 150, 105, 0.1);
    --success-border: rgba(5, 150, 105, 0.2);
    --success-text: #059669;
    --warning-bg: rgba(217, 119, 6, 0.1);
    --warning-border: rgba(217, 119, 6, 0.2);
    --warning-text: #d97706;
    --error-bg: rgba(220, 38, 38, 0.1);
    --error-border: rgba(220, 38, 38, 0.2);
    --error-text: #dc2626;
    --info-bg: rgba(37, 99, 235, 0.1);
    --info-border: rgba(37, 99, 235, 0.2);
    --info-text: #2563eb;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Scrollbar */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb-hover: rgba(31, 111, 178, 0.5);
    
    /* Sidebar - Light theme */
    --sidebar-bg: rgba(255, 255, 255, 0.95);
    --sidebar-header-bg: #ffffff;
    --sidebar-border: rgba(31, 111, 178, 0.12);
    --sidebar-text: #1a1a2e;
    --sidebar-text-muted: #6b6b8a;
    --sidebar-item-hover: rgba(31, 111, 178, 0.1);
    --sidebar-item-active-bg: rgba(31, 111, 178, 0.12);
    --sidebar-item-active-border: rgba(31, 111, 178, 0.25);
    --sidebar-icon-bg: rgba(31, 111, 178, 0.05);
    --sidebar-icon-border: rgba(31, 111, 178, 0.08);
    --sidebar-toggle-border: rgba(0, 0, 0, 0.1);
    --sidebar-toggle-hover-bg: rgba(31, 111, 178, 0.1);
    
    /* Theme toggle icon - In light mode, show moon to switch to dark */
    --theme-icon-display-sun: none;
    --theme-icon-display-moon: block;
}

/* ========================================
   SMOOTH THEME TRANSITION
   ======================================== */
html {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body,
.main-content,
.card,
.navbar,
footer,
.btn,
input,
textarea,
select,
.sidebar,
.sidebar__header,
.sidebar__footer,
.sidebar__link,
.sidebar__icon {
    transition: 
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on page load to prevent flash */
.no-transition * {
    transition: none !important;
}

/* ========================================
   THEME TOGGLE BUTTON
   ======================================== */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.theme-toggle:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    transform: scale(1.05);
    box-shadow: var(--shadow-glow-purple);
}

.theme-toggle:hover .theme-icon {
    color: #ffffff;
}

.theme-icon {
    font-size: 1.2rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.theme-icon.sun {
    display: var(--theme-icon-display-sun);
}

.theme-icon.moon {
    display: var(--theme-icon-display-moon);
}

/* Icon animation on theme change */
.theme-toggle.switching .theme-icon {
    animation: iconSpin 0.5s ease;
}

@keyframes iconSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(0.8); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ========================================
   APPLY THEME VARIABLES TO COMMON ELEMENTS
   ======================================== */

/* Body */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}


/* Cards */
.card,
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
}

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--brand-primary-15);
}

/* Links */
a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Muted text */
.text-muted {
    color: var(--text-muted) !important;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Selection */
::selection {
    background: var(--brand-primary-30);
    color: var(--text-primary);
}

/* ========================================
   THEME-AWARE COMPONENT OVERRIDES
   ======================================== */

/* Bootstrap overrides for theme compatibility */
[data-theme="light"] .navbar {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .navbar-nav .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .navbar-nav .nav-link:hover {
    color: var(--accent-purple) !important;
}

[data-theme="light"] .btn-outline-secondary {
    border-color: var(--border-medium);
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-item:hover {
    background: var(--bg-tertiary);
}

[data-theme="light"] .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
}

[data-theme="light"] .table {
    color: var(--text-primary);
}

[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bg-secondary);
}

[data-theme="light"] hr {
    border-color: var(--border-light);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* Tile tones from the landing page: a soft fill (--tone) and a strong ink for icons and links (--tone-ink) */
:root {
    --lib-rose: #ffe2d9;
    --lib-rose-ink: #c2452b;
    --lib-sky: #d6eafb;
    --lib-sky-ink: #1f6fb2;
    --lib-sun: #ffeaa8;
    --lib-sun-ink: #a86a00;
    --lib-mint: #cdf4ea;
    --lib-mint-ink: #0f8f7c;
    --lib-lilac: #e7e1fb;
    --lib-lilac-ink: #6a4fc9;
    --lib-radius: 22px;
}

[data-theme="dark"] {
    --lib-rose: #3a2129;
    --lib-rose-ink: #ff9d82;
    --lib-sky: #16304a;
    --lib-sky-ink: #7cc0f4;
    --lib-sun: #3a3218;
    --lib-sun-ink: #f5c85a;
    --lib-mint: #123a33;
    --lib-mint-ink: #5fd6bd;
    --lib-lilac: #2a2544;
    --lib-lilac-ink: #b9a6ff;
}

.lib-tone--rose { --tone: var(--lib-rose); --tone-ink: var(--lib-rose-ink); }
.lib-tone--sky { --tone: var(--lib-sky); --tone-ink: var(--lib-sky-ink); }
.lib-tone--sun { --tone: var(--lib-sun); --tone-ink: var(--lib-sun-ink); }
.lib-tone--mint { --tone: var(--lib-mint); --tone-ink: var(--lib-mint-ink); }
.lib-tone--lilac { --tone: var(--lib-lilac); --tone-ink: var(--lib-lilac-ink); }