/* ─── Themes (Applied as body classes) ────────────────────────────── */

/* Theme 1: Default Dark (no class needed, falls back to base.css) */
/* body.theme-default implicitly uses base.css root variables */


/* Theme 5: Light Vanilla (All Ages) */
body.theme-light {
    --bg: #f8f9fa; /* Crisp light gray/white */
    --surface: rgba(0, 0, 0, 0.04);
    --surface-hover: rgba(0, 0, 0, 0.08);
    --text-primary: #1a1b1e;
    --text-secondary: #5c5f66;
    --border: rgba(0, 0, 0, 0.1);
    --glow: rgba(0, 0, 0, 0.04);
    --accent: rgba(0, 102, 204, 0.1);
    --accent-text: #0044cc;
    --accent-border: rgba(0, 102, 204, 0.2);
    
    --text-color: #1a1b1e;
    --text-glow-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(255, 255, 255, 0.8);
}

body.theme-light .header {
    background: rgba(248, 249, 250, 0.85);
    border-bottom-color: var(--border);
}

/* Fix header title gradient for light theme */
body.theme-light .header h1 {
    background: linear-gradient(135deg, #1a1b1e 0%, #4a4b50 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Modals and nav buttons for light theme */
body.theme-light .nav-btn, 
body.theme-light .app-status {
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-primary);
    border-color: var(--border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

body.theme-light .nav-btn:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: rgba(0,0,0,0.15);
}

body.theme-light .cheatsheet-pill {
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.2);
    color: #0044cc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body.theme-light .cheatsheet-pill:hover {
    background: rgba(0, 102, 204, 0.15);
    border-color: rgba(0, 102, 204, 0.3);
    color: #003399;
}

body.theme-light .cheatsheet-lightbox-content {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

body.theme-light .cheatsheet-lightbox-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: #e5e7eb;
}

body.theme-light .cheatsheet-lightbox-title {
    color: var(--text-primary);
}

body.theme-light .cheatsheet-lightbox-list-container {
    background: #f8f9fa;
}

body.theme-light .modal-content {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

body.theme-light .modal-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom-color: #e5e7eb;
}

body.theme-light .modal-header h2 {
    color: var(--text-primary);
}

body.theme-light .modal-close {
    color: var(--text-secondary);
}

body.theme-light .modal-close:hover {
    color: var(--text-primary);
    background: rgba(0,0,0,0.05);
}

body.theme-light text {
    fill: var(--text-primary);
}

/* Theme 6: Slate Gray */
body.theme-slate {
    --bg: #3b4252; /* 25% lighter slate gray */
    --surface: rgba(255, 255, 255, 0.08);
    --surface-hover: rgba(255, 255, 255, 0.12);
    --border: rgba(255, 255, 255, 0.12);
}

body.theme-slate .header {
    background: rgba(59, 66, 82, 0.75);
}