/* css/theme-vars.css
/* Note to Contributors:
   Please maintain a professional tone in comments.
   Describe the purpose of CSS variables and logical groupings.
   Avoid versioning comments. Ensure clarity for theme customization.
*/

/**
 * @file theme-vars.css
 * @description Defines CSS Custom Properties (variables) for all themes,
 * font families, spacing units, layout dimensions, and transitions.
 * This is the central hub for theme palette definitions.
 */

:root {
    /* Font Stacks */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Lexend', 'Inter', sans-serif;
    --font-monospace: 'Fira Code', 'Consolas', 'Menlo', 'Courier New', monospace;
    --font-icons: 'Material Symbols Outlined', sans-serif;

    /* Spacing Units */
    --spacing-xs: 0.3rem;
    --spacing-sm: 0.6rem;
    --spacing-md: 1.2rem;
    --spacing-lg: 1.8rem;
    --spacing-xl: 2.4rem;
    --spacing-xxl: 3.6rem;
    --list-indent: 1.5em;

    /* Border Radii */
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;

    /* Layout Dimensions */
    --sidebar-width: clamp(330px, 80vw, 450px);
    --header-height: 70px; 
    --content-max-width: 70%;

    /* Transitions */
    --transition-speed-fast: 0.15s;
    --transition-speed-normal: 0.25s; /* Use this for dropdowns now */
    /* --transition-speed-long: 0.3s; Removed, using normal for dropdowns */
    --transition-timing-sidebar: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-timing-default: ease-in-out;
    --transition-timing-dropdown: ease-out; /* CHANGED to ease-out for a quicker feel */


    /* Vertical Progress Bar Dimensions */
    --vertical-progress-width: 4px;
    --vertical-progress-indicator-width: 12px;
    --vertical-progress-indicator-height-part: 3px;
    --vertical-progress-indicator-height-chapter: 2px;


    /* --- PER-THEME COLOR DEFINITIONS --- */

    /* Dark Theme (Original Default) */
    --bg-main-dark: #0F172A;
    --rgb-bg-main-dark: 15, 23, 42;
    --bg-elements-dark: #1E293B;
    --bg-section-dark: #182333;
    --bg-subsection-dark: #151E2B;
    --bg-hover-dark: #334155;
    --bg-active-dark: #475569;
    --text-primary-dark: #E2E8F0;
    --text-secondary-dark: #94A3B8;
    --accent-primary-dark: #38BDF8;
    --accent-secondary-dark: #67E8F9;
    --border-dark: #334155;
    --button-bg-dark: var(--bg-elements-dark);
    --button-text-dark: var(--accent-primary-dark);
    --button-hover-bg-dark: var(--bg-hover-dark);
    --button-hover-text-dark: var(--accent-primary-dark);
    --shadow-color-dark: rgba(0,0,0,0.4);
    --table-header-bg-dark: var(--bg-hover-dark);
    --table-header-text-dark: var(--text-primary-dark);
    --table-cell-bg-odd-dark: var(--bg-section-dark);
    --table-cell-bg-even-dark: var(--bg-subsection-dark);
    --table-cell-text-dark: var(--text-primary-dark);
    --table-cell-text-accent-dark: var(--accent-primary-dark);
    --table-border-dark: var(--border-dark);
    --vertical-progress-track-color-dark: color-mix(in srgb, var(--border-dark) 40%, transparent);
    --vertical-progress-indicator-color-default-dark: color-mix(in srgb, var(--text-secondary-dark) 50%, transparent);
    --current-chapter-info-bg-dark: var(--bg-elements-dark);
    --current-chapter-info-text-dark: var(--text-primary-dark);
    --scrollbar-thumb-color-dark: color-mix(in srgb, var(--text-secondary-dark) 35%, transparent);
    --scrollbar-thumb-hover-color-dark: color-mix(in srgb, var(--text-secondary-dark) 55%, transparent);

    /* Light Theme (Original) */
    --bg-main-light: #FAF6EC;
    --rgb-bg-main-light: 250, 246, 236;
    --bg-elements-light: #E8DAB2;
    --bg-section-light: #FFFFFF;
    --bg-subsection-light: #F4EFE1;
    --bg-hover-light: #D9CEA1;
    --bg-active-light: #C9B88B;
    --text-primary-light: #453831;
    --text-secondary-light: #666666;
    --accent-primary-light: #BB0000;
    --accent-secondary-light: #D43F3F;
    --border-light: #C5B89C;
    --button-bg-light: var(--bg-elements-light);
    --button-text-light: var(--accent-primary-light);
    --button-hover-bg-light: var(--bg-hover-light);
    --button-hover-text-light: var(--accent-primary-light);
    --shadow-color-light: rgba(69, 56, 49, 0.1);
    --table-header-bg-light: var(--bg-hover-light);
    --table-header-text-light: var(--text-primary-light);
    --table-cell-bg-odd-light: var(--bg-section-light);
    --table-cell-bg-even-light: var(--bg-subsection-light);
    --table-cell-text-light: var(--text-primary-light);
    --table-cell-text-accent-light: var(--accent-primary-light);
    --table-border-light: var(--border-light);
    --vertical-progress-track-color-light: color-mix(in srgb, var(--border-light) 60%, transparent);
    --vertical-progress-indicator-color-default-light: color-mix(in srgb, var(--text-secondary-light) 40%, transparent);
    --current-chapter-info-bg-light: #F0E8D0;
    --current-chapter-info-text-light: var(--text-primary-light);
    --scrollbar-thumb-color-light: color-mix(in srgb, var(--text-secondary-light) 35%, transparent);
    --scrollbar-thumb-hover-color-light: color-mix(in srgb, var(--text-secondary-light) 55%, transparent);

    /* Sunset Theme (Original) */
    --bg-main-sunset: #4A2C24;
    --rgb-bg-main-sunset: 74, 44, 36;
    --bg-elements-sunset: #6B3C32;
    --bg-section-sunset: #5F332A;
    --bg-subsection-sunset: #552E25;
    --bg-hover-sunset: #804B3F;
    --bg-active-sunset: #945A4C;
    --text-primary-sunset: #FCEFDA;
    --text-secondary-sunset: #E0C9A6;
    --accent-primary-sunset: #FF8C42;
    --accent-secondary-sunset: #FFA56A;
    --border-sunset: #804B3F;
    --button-bg-sunset: var(--bg-elements-sunset);
    --button-text-sunset: var(--accent-primary-sunset);
    --button-hover-bg-sunset: var(--bg-hover-sunset);
    --button-hover-text-sunset: var(--accent-primary-sunset);
    --shadow-color-sunset: rgba(40,20,10,0.4);
    --table-header-bg-sunset: var(--bg-hover-sunset);
    --table-header-text-sunset: var(--text-primary-sunset);
    --table-cell-bg-odd-sunset: var(--bg-section-sunset);
    --table-cell-bg-even-sunset: var(--bg-subsection-sunset);
    --table-cell-text-sunset: var(--text-primary-sunset);
    --table-cell-text-accent-sunset: var(--accent-primary-sunset);
    --table-border-sunset: var(--border-sunset);
    --vertical-progress-track-color-sunset: color-mix(in srgb, var(--border-sunset) 40%, transparent);
    --vertical-progress-indicator-color-default-sunset: color-mix(in srgb, var(--text-secondary-sunset) 50%, transparent);
    --current-chapter-info-bg-sunset: var(--bg-elements-sunset);
    --current-chapter-info-text-sunset: var(--text-primary-sunset);
    --scrollbar-thumb-color-sunset: color-mix(in srgb, var(--text-secondary-sunset) 35%, transparent);
    --scrollbar-thumb-hover-color-sunset: color-mix(in srgb, var(--text-secondary-sunset) 55%, transparent);

    /* Empire Theme (Original) */
    --bg-main-empire: #1C2526;
    --rgb-bg-main-empire: 28, 37, 38;
    --bg-elements-empire: #323839;
    --bg-section-empire: #252B2C;
    --bg-subsection-empire: #202728;
    --bg-hover-empire: #4A4E4D;
    --bg-active-empire: #585C5B;
    --text-primary-empire: #E0E0E0;
    --text-secondary-empire: #94A3B8;
    --accent-primary-empire: #8B0000;
    --accent-secondary-empire: #A52A2A;
    --border-empire: #2F4F4F;
    --button-bg-empire: var(--bg-elements-empire);
    --button-text-empire: var(--accent-primary-empire);
    --button-hover-bg-empire: var(--bg-hover-empire);
    --button-hover-text-empire: var(--text-primary-empire);
    --shadow-color-empire: rgba(0,0,0,0.5);
    --table-header-bg-empire: var(--bg-hover-empire);
    --table-header-text-empire: var(--text-primary-empire);
    --table-cell-bg-odd-empire: var(--bg-section-empire);
    --table-cell-bg-even-empire: var(--bg-subsection-empire);
    --table-cell-text-empire: var(--text-primary-empire);
    --table-cell-text-accent-empire: var(--accent-primary-empire);
    --table-border-empire: var(--border-empire);
    --vertical-progress-track-color-empire: color-mix(in srgb, var(--border-empire) 35%, transparent);
    --vertical-progress-indicator-color-default-empire: color-mix(in srgb, var(--text-secondary-empire) 40%, transparent);
    --current-chapter-info-bg-empire: var(--bg-elements-empire);
    --current-chapter-info-text-empire: var(--text-primary-empire);
    --scrollbar-thumb-color-empire: color-mix(in srgb, var(--text-secondary-empire) 35%, transparent);
    --scrollbar-thumb-hover-color-empire: color-mix(in srgb, var(--text-secondary-empire) 55%, transparent);

    /* Republic Theme (Original) */
    --bg-main-republic: #F5F5F5;
    --rgb-bg-main-republic: 245, 245, 245;
    --bg-elements-republic: #EAE0D1;
    --bg-section-republic: #FFFFFF;
    --bg-subsection-republic: #F0EBE3;
    --bg-hover-republic: #D9CEA1;
    --bg-active-republic: #C9B88B;
    --text-primary-republic: #284A2D;
    --text-secondary-republic: #5D7461;
    --accent-primary-republic: #355E3B;
    --accent-secondary-republic: #6B8E23;
    --border-republic: #BCAEA0;
    --button-bg-republic: var(--bg-elements-republic);
    --button-text-republic: var(--accent-primary-republic);
    --button-hover-bg-republic: var(--bg-hover-republic);
    --button-hover-text-republic: var(--text-primary-republic);
    --shadow-color-republic: rgba(80, 70, 60, 0.15);
    --table-header-bg-republic: var(--bg-hover-republic);
    --table-header-text-republic: var(--text-primary-republic);
    --table-cell-bg-odd-republic: var(--bg-section-republic);
    --table-cell-bg-even-republic: var(--bg-subsection-republic);
    --table-cell-text-republic: var(--text-primary-republic);
    --table-cell-text-accent-republic: var(--accent-primary-republic);
    --table-border-republic: var(--border-republic);
    --vertical-progress-track-color-republic: color-mix(in srgb, var(--border-republic) 50%, transparent);
    --vertical-progress-indicator-color-default-republic: color-mix(in srgb, var(--text-secondary-republic) 35%, transparent);
    --current-chapter-info-bg-republic: color-mix(in srgb, var(--bg-elements-republic) 90%, var(--bg-main-republic) 10%);
    --current-chapter-info-text-republic: var(--text-primary-republic);
    --scrollbar-thumb-color-republic: color-mix(in srgb, var(--text-secondary-republic) 35%, transparent);
    --scrollbar-thumb-hover-color-republic: color-mix(in srgb, var(--text-secondary-republic) 55%, transparent);

    /* 1.1 Neumorphism - Sands of Serenity */
    --bg-main-sands-of-serenity: #F8EFE6;
    --rgb-bg-main-sands-of-serenity: 248, 239, 230;
    --bg-elements-sands-of-serenity: #F1E6D6;
    --bg-section-sands-of-serenity: #F1E6D6;
    --bg-subsection-sands-of-serenity: #F1E6D6;
    --text-primary-sands-of-serenity: #5F4A3F;
    --text-secondary-sands-of-serenity: #8C7761;
    --accent-primary-sands-of-serenity: #D4A17A;
    --accent-secondary-sands-of-serenity: #C9977D;
    --border-sands-of-serenity: transparent;
    --neumorphic-dark-shadow-sands-of-serenity: rgba(189, 172, 157, 0.6);
    --neumorphic-light-shadow-sands-of-serenity: rgba(255, 255, 255, 0.8);
    --neumorphic-shadow-offset-sands-of-serenity: 8px;
    --neumorphic-shadow-blur-sands-of-serenity: 20px;
    --neumorphic-border-radius-sands-of-serenity: 12px;
    --button-bg-sands-of-serenity: var(--bg-elements-sands-of-serenity);
    --button-text-sands-of-serenity: var(--text-primary-sands-of-serenity);
    --button-hover-bg-sands-of-serenity: color-mix(in srgb, var(--bg-elements-sands-of-serenity) 95%, #fff 5%);
    --button-hover-text-sands-of-serenity: var(--text-primary-sands-of-serenity);
    --shadow-color-sands-of-serenity: rgba(189, 172, 157, 0.3);
    --table-header-bg-sands-of-serenity: #EBDDCD;
    --table-header-text-sands-of-serenity: var(--text-primary-sands-of-serenity);
    --table-cell-bg-odd-sands-of-serenity: var(--bg-elements-sands-of-serenity);
    --table-cell-bg-even-sands-of-serenity: #F5EDE0;
    --table-cell-text-sands-of-serenity: var(--text-primary-sands-of-serenity);
    --table-cell-text-accent-sands-of-serenity: var(--accent-primary-sands-of-serenity);
    --table-border-sands-of-serenity: #DCCAB7;
    --vertical-progress-track-color-sands-of-serenity: #DCCAB7;
    --vertical-progress-indicator-color-default-sands-of-serenity: #C9B6A3;
    --current-chapter-info-bg-sands-of-serenity: var(--bg-elements-sands-of-serenity);
    --current-chapter-info-text-sands-of-serenity: var(--text-primary-sands-of-serenity);
    --scrollbar-thumb-color-sands-of-serenity: #C9B6A3;
    --scrollbar-thumb-hover-color-sands-of-serenity: #B9A28E;

    /* 1.2 Neumorphism - Moonlit Marble */
    --bg-main-moonlit-marble: #ECEEF1;
    --rgb-bg-main-moonlit-marble: 236, 238, 241;
    --bg-elements-moonlit-marble: #E5E8EB;
    --bg-section-moonlit-marble: #E5E8EB;
    --bg-subsection-moonlit-marble: #E5E8EB;
    --text-primary-moonlit-marble: #2A2E35;
    --text-secondary-moonlit-marble: #545A65;
    --accent-primary-moonlit-marble: #8E94A7;
    --accent-secondary-moonlit-marble: #6C7183;
    --border-moonlit-marble: transparent;
    --neumorphic-dark-shadow-moonlit-marble: rgba(143, 149, 158, 0.5);
    --neumorphic-light-shadow-moonlit-marble: rgba(255, 255, 255, 0.9);
    --neumorphic-shadow-offset-moonlit-marble: 6px;
    --neumorphic-shadow-blur-moonlit-marble: 16px;
    --neumorphic-border-radius-moonlit-marble: 10px;
    --button-bg-moonlit-marble: var(--bg-elements-moonlit-marble);
    --button-text-moonlit-marble: var(--text-primary-moonlit-marble);
    --button-hover-bg-moonlit-marble: #F0F3F7;
    --button-hover-text-moonlit-marble: var(--text-primary-moonlit-marble);
    --shadow-color-moonlit-marble: rgba(143, 149, 158, 0.25);
    --table-header-bg-moonlit-marble: #DCE0E5;
    --table-header-text-moonlit-marble: var(--text-primary-moonlit-marble);
    --table-cell-bg-odd-moonlit-marble: var(--bg-elements-moonlit-marble);
    --table-cell-bg-even-moonlit-marble: #EBEEF0;
    --table-cell-text-moonlit-marble: var(--text-primary-moonlit-marble);
    --table-cell-text-accent-moonlit-marble: var(--accent-primary-moonlit-marble);
    --table-border-moonlit-marble: #CED2D8;
    --vertical-progress-track-color-moonlit-marble: #CED2D8;
    --vertical-progress-indicator-color-default-moonlit-marble: #BFC4CA;
    --current-chapter-info-bg-moonlit-marble: var(--bg-elements-moonlit-marble);
    --current-chapter-info-text-moonlit-marble: var(--text-primary-moonlit-marble);
    --scrollbar-thumb-color-moonlit-marble: #BFC4CA;
    --scrollbar-thumb-hover-color-moonlit-marble: #AFB4BA;

    /* 2.1 Glassmorphism - Crystal Coral Reef */
    --bg-main-crystal-coral-reef: #E0F7FA;
    --rgb-bg-main-crystal-coral-reef: 224, 247, 250;
    --bg-elements-crystal-coral-reef: rgba(255, 255, 255, 0.15);
    --bg-section-crystal-coral-reef: rgba(255, 255, 255, 0.1);
    --bg-subsection-crystal-coral-reef: rgba(255, 255, 255, 0.05);
    --text-primary-crystal-coral-reef: #00363A;
    --text-secondary-crystal-coral-reef: #006064;
    --accent-primary-crystal-coral-reef: #FF6F61;
    --accent-secondary-coral-reef: #00838F;
    --accent-tertiary-crystal-coral-reef: #FFD700;
    --border-crystal-coral-reef: rgba(255, 255, 255, 0.25);
    --glassmorphic-blur-crystal-coral-reef: 12px;
    --glassmorphic-border-radius-crystal-coral-reef: 16px;
    --button-bg-crystal-coral-reef: rgba(255, 255, 255, 0.2);
    --button-text-crystal-coral-reef: var(--text-primary-crystal-coral-reef);
    --button-hover-bg-crystal-coral-reef: rgba(255, 255, 255, 0.3);
    --button-hover-text-crystal-coral-reef: var(--text-primary-crystal-coral-reef);
    --shadow-color-crystal-coral-reef: rgba(0, 54, 58, 0.1);
    --table-header-bg-crystal-coral-reef: rgba(255, 255, 255, 0.25);
    --table-header-text-crystal-coral-reef: var(--text-primary-crystal-coral-reef);
    --table-cell-bg-odd-crystal-coral-reef: rgba(255, 255, 255, 0.1);
    --table-cell-bg-even-crystal-coral-reef: rgba(255, 255, 255, 0.05);
    --table-cell-text-crystal-coral-reef: var(--text-primary-crystal-coral-reef);
    --table-cell-text-accent-crystal-coral-reef: var(--accent-primary-crystal-coral-reef);
    --table-border-crystal-coral-reef: var(--border-crystal-coral-reef);
    --vertical-progress-track-color-crystal-coral-reef: rgba(255,255,255,0.2);
    --vertical-progress-indicator-color-default-crystal-coral-reef: rgba(255,255,255,0.4);
    --current-chapter-info-bg-crystal-coral-reef: var(--bg-elements-crystal-coral-reef);
    --current-chapter-info-text-crystal-coral-reef: var(--text-primary-crystal-coral-reef);
    --scrollbar-thumb-color-crystal-coral-reef: rgba(0, 96, 100, 0.3);
    --scrollbar-thumb-hover-color-crystal-coral-reef: rgba(0, 96, 100, 0.5);

    /* 2.2 Glassmorphism - Neon Frostbite */
    --bg-main-neon-frostbite: #0D1218;
    --rgb-bg-main-neon-frostbite: 13, 18, 24;
    --bg-elements-neon-frostbite: rgba(10, 25, 40, 0.2);
    --bg-section-neon-frostbite: rgba(10, 25, 40, 0.15);
    --bg-subsection-neon-frostbite: rgba(10, 25, 40, 0.1);
    --text-primary-neon-frostbite: #E0F7FA;
    --text-secondary-neon-frostbite: #B2EBF2;
    --accent-primary-neon-frostbite: #00E5FF;
    --accent-secondary-neon-frostbite: #1DE9B6;
    --accent-highlight-neon-frostbite: #66FFFF;
    --border-neon-frostbite: rgba(0, 229, 255, 0.3);
    --glassmorphic-blur-neon-frostbite: 16px;
    --glassmorphic-border-radius-neon-frostbite: 20px;
    --button-bg-neon-frostbite: var(--accent-primary-neon-frostbite);
    --button-text-neon-frostbite: #0D1218;
    --button-hover-bg-neon-frostbite: var(--accent-secondary-neon-frostbite);
    --button-hover-text-neon-frostbite: #000000;
    --shadow-color-neon-frostbite: rgba(0, 229, 255, 0.15);
    --table-header-bg-neon-frostbite: rgba(10, 25, 40, 0.35);
    --table-header-text-neon-frostbite: var(--text-primary-neon-frostbite);
    --table-cell-bg-odd-neon-frostbite: rgba(10, 25, 40, 0.15);
    --table-cell-bg-even-neon-frostbite: rgba(10, 25, 40, 0.1);
    --table-cell-text-neon-frostbite: var(--text-primary-neon-frostbite);
    --table-cell-text-accent-neon-frostbite: var(--accent-primary-neon-frostbite);
    --table-border-neon-frostbite: var(--border-neon-frostbite);
    --vertical-progress-track-color-neon-frostbite: rgba(0,229,255,0.15);
    --vertical-progress-indicator-color-default-neon-frostbite: rgba(0,229,255,0.3);
    --current-chapter-info-bg-neon-frostbite: var(--bg-elements-neon-frostbite);
    --current-chapter-info-text-neon-frostbite: var(--text-primary-neon-frostbite);
    --scrollbar-thumb-color-neon-frostbite: rgba(0,229,255,0.2);
    --scrollbar-thumb-hover-color-neon-frostbite: rgba(0,229,255,0.4);

    /* 3.1 Dark Mode - Cyber Twilight Glow */
    --bg-main-cyber-twilight-glow: #0F0F13;
    --rgb-bg-main-cyber-twilight-glow: 15, 15, 19;
    --bg-elements-cyber-twilight-glow: #18181D;
    --bg-section-cyber-twilight-glow: #141418;
    --bg-subsection-cyber-twilight-glow: #111115;
    --text-primary-cyber-twilight-glow: #EAEAEA;
    --text-secondary-cyber-twilight-glow: #B5B5B5;
    --accent-primary-cyber-twilight-glow: #FF3CAC;
    --accent-secondary-cyber-twilight-glow: #3A0CA3;
    --glow-highlight-cyber-twilight-glow: rgba(255, 60, 172, 0.4);
    --border-cyber-twilight-glow: #28282D;
    --button-bg-cyber-twilight-glow: transparent;
    --button-text-cyber-twilight-glow: var(--accent-primary-cyber-twilight-glow);
    --button-hover-bg-cyber-twilight-glow: var(--accent-primary-cyber-twilight-glow);
    --button-hover-text-cyber-twilight-glow: #000000;
    --shadow-color-cyber-twilight-glow: rgba(0,0,0,0.6);
    --table-header-bg-cyber-twilight-glow: #202025;
    --table-header-text-cyber-twilight-glow: var(--text-primary-cyber-twilight-glow);
    --table-cell-bg-odd-cyber-twilight-glow: var(--bg-section-cyber-twilight-glow);
    --table-cell-bg-even-cyber-twilight-glow: var(--bg-subsection-cyber-twilight-glow);
    --table-cell-text-cyber-twilight-glow: var(--text-primary-cyber-twilight-glow);
    --table-cell-text-accent-cyber-twilight-glow: var(--accent-primary-cyber-twilight-glow);
    --table-border-cyber-twilight-glow: var(--border-cyber-twilight-glow);
    --vertical-progress-track-color-cyber-twilight-glow: #28282D;
    --vertical-progress-indicator-color-default-cyber-twilight-glow: #404045;
    --current-chapter-info-bg-cyber-twilight-glow: var(--bg-elements-cyber-twilight-glow);
    --current-chapter-info-text-cyber-twilight-glow: var(--text-primary-cyber-twilight-glow);
    --scrollbar-thumb-color-cyber-twilight-glow: #404045;
    --scrollbar-thumb-hover-color-cyber-twilight-glow: var(--accent-primary-cyber-twilight-glow);

    /* 3.2 Dark Mode - Midnight Circuit Pulse */
    --bg-main-midnight-circuit-pulse: #0A0F0A;
    --rgb-bg-main-midnight-circuit-pulse: 10, 15, 10;
    --bg-elements-midnight-circuit-pulse: #141A14;
    --bg-section-midnight-circuit-pulse: #0F150F;
    --bg-subsection-midnight-circuit-pulse: #0C120C;
    --text-primary-midnight-circuit-pulse: #D0F4DD;
    --text-secondary-midnight-circuit-pulse: #A2E6B0;
    --accent-primary-midnight-circuit-pulse: #00FF7F;
    --accent-secondary-midnight-circuit-pulse: #00CC66;
    --glow-highlight-midnight-circuit-pulse: rgba(0, 255, 127, 0.4);
    --border-midnight-circuit-pulse: #1E281E;
    --button-bg-midnight-circuit-pulse: transparent;
    --button-text-midnight-circuit-pulse: var(--accent-primary-midnight-circuit-pulse);
    --button-hover-bg-midnight-circuit-pulse: var(--accent-primary-midnight-circuit-pulse);
    --button-hover-text-midnight-circuit-pulse: #000000;
    --shadow-color-midnight-circuit-pulse: rgba(0,0,0,0.7);
    --table-header-bg-midnight-circuit-pulse: #1A231A;
    --table-header-text-midnight-circuit-pulse: var(--text-primary-midnight-circuit-pulse);
    --table-cell-bg-odd-midnight-circuit-pulse: var(--bg-section-midnight-circuit-pulse);
    --table-cell-bg-even-midnight-circuit-pulse: var(--bg-subsection-midnight-circuit-pulse);
    --table-cell-text-midnight-circuit-pulse: var(--text-primary-midnight-circuit-pulse);
    --table-cell-text-accent-midnight-circuit-pulse: var(--accent-primary-midnight-circuit-pulse);
    --table-border: var(--border-midnight-circuit-pulse);
    --vertical-progress-track-color-midnight-circuit-pulse: #1E281E;
    --vertical-progress-indicator-color-default-midnight-circuit-pulse: #2C3C2C;
    --current-chapter-info-bg-midnight-circuit-pulse: var(--bg-elements-midnight-circuit-pulse);
    --current-chapter-info-text-midnight-circuit-pulse: var(--text-primary-midnight-circuit-pulse);
    --scrollbar-thumb-color-midnight-circuit-pulse: #2C3C2C;
    --scrollbar-thumb-hover-color-midnight-circuit-pulse: var(--accent-primary-midnight-circuit-pulse);


    /* --- THEME-AGNOSTIC ALIASES (Dark Theme is the initial default set here) --- */
    --bg-main: var(--bg-main-dark);
    --rgb-bg-main: var(--rgb-bg-main-dark);
    --bg-elements: var(--bg-elements-dark);
    --bg-section: var(--bg-section-dark);
    --bg-subsection: var(--bg-subsection-dark);
    --bg-hover: var(--bg-hover-dark);
    --bg-active: var(--bg-active-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --accent-primary: var(--accent-primary-dark);
    --accent-secondary: var(--accent-secondary-dark);
    --accent-tertiary: var(--accent-primary-dark);
    --border: var(--border-dark);
    --button-bg: var(--button-bg-dark);
    --button-text: var(--button-text-dark);
    --button-hover-bg: var(--button-hover-bg-dark);
    --button-hover-text: var(--button-hover-text-dark);
    --shadow-color: var(--shadow-color-dark);
    --shadow-sm: 0 2px 4px var(--shadow-color);
    --shadow-md: 0 4px 10px var(--shadow-color);
    --shadow-lg: 0 8px 20px var(--shadow-color);

    --table-header-bg: var(--table-header-bg-dark);
    --table-header-text: var(--table-header-text-dark);
    --table-cell-bg-odd: var(--table-cell-bg-odd-dark);
    --table-cell-bg-even: var(--table-cell-bg-even-dark);
    --table-cell-text: var(--table-cell-text-dark);
    --table-cell-text-accent: var(--table-cell-text-accent-dark);
    --table-border: var(--table-border-dark);

    --vertical-progress-track-color: var(--vertical-progress-track-color-dark);
    --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-dark);
    --vertical-progress-indicator-color-active: var(--accent-primary);
    --current-chapter-info-bg: var(--current-chapter-info-bg-dark);
    --current-chapter-info-text: var(--current-chapter-info-text-dark);

    --scrollbar-thumb-color: var(--scrollbar-thumb-color-dark);
    --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-dark);
    --select-arrow-color: var(--text-primary);

    /* Specific style aliases */
    --neumorphic-shadow-offset: var(--neumorphic-shadow-offset-sands-of-serenity);
    --neumorphic-shadow-blur: var(--neumorphic-shadow-blur-sands-of-serenity);
    --neumorphic-border-radius: var(--neumorphic-border-radius-sands-of-serenity);
    --neumorphic-dark-shadow: var(--neumorphic-dark-shadow-sands-of-serenity);
    --neumorphic-light-shadow: var(--neumorphic-light-shadow-sands-of-serenity);

    --glassmorphic-blur: var(--glassmorphic-blur-crystal-coral-reef);
    --glassmorphic-border-radius: var(--glassmorphic-border-radius-crystal-coral-reef);
    --gradient-mesh-blur: 0px;

    /* --- NEW: Text color for high contrast against accent backgrounds --- */
    --accent-contrast-text: #0F172A; /* Default for dark theme's light blue accent */

    /* --- NEW: Image Figure/Caption Theming Variables (:root defaults) --- */
    --image-figure-bg: var(--bg-section);
    --image-figure-border-color: var(--border);
    --image-figure-caption-text-color: var(--text-secondary);
    --image-figure-padding: var(--spacing-sm);
    --image-figure-radius: var(--border-radius-md);

    /* --- NEW: Blockquote Theming Variables (:root defaults, using dark theme as base) --- */
    --blockquote-bg-default: var(--bg-elements-dark);
    --blockquote-text-default: var(--text-secondary-dark);
    --blockquote-border-default: var(--accent-primary-dark);
    --blockquote-header-text-color: var(--text-secondary-dark);

    --blockquote-accent-note: var(--accent-primary-dark);
    --blockquote-bg-note: color-mix(in srgb, var(--blockquote-accent-note) 15%, var(--blockquote-bg-default));
    --blockquote-text-note: var(--text-primary-dark);

    --blockquote-accent-danger: #EF5350; /* Softer Red for Dark */
    --blockquote-bg-danger: color-mix(in srgb, var(--blockquote-accent-danger) 15%, var(--blockquote-bg-default));
    --blockquote-text-danger: #E57373;

    --blockquote-accent-reminder: #FFCA28; /* Brighter Yellow for Dark */
    --blockquote-bg-reminder: color-mix(in srgb, var(--blockquote-accent-reminder) 15%, var(--blockquote-bg-default));
    --blockquote-text-reminder: #FFEE58;

    --blockquote-accent-quote: var(--text-secondary-dark);
    --blockquote-bg-quote: var(--bg-subsection-dark);
    --blockquote-text-quote: var(--text-secondary-dark);

    --blockquote-accent-info: var(--accent-secondary-dark); /* Cyanish */
    --blockquote-bg-info: color-mix(in srgb, var(--blockquote-accent-info) 15%, var(--blockquote-bg-default));
    --blockquote-text-info: var(--text-primary-dark);

    --blockquote-accent-news: #66BB6A; /* Softer Green for Dark */
    --blockquote-bg-news: color-mix(in srgb, var(--blockquote-accent-news) 15%, var(--blockquote-bg-default));
    --blockquote-text-news: #A5D6A7;

    /* NEW: Changelog & Quiz specific colors (aliases to existing ones) */
    --changelog-intro-bg: var(--bg-subsection);
    --changelog-intro-border: var(--accent-primary);
    --changelog-intro-text: var(--text-primary);
    --changelog-entry-border: var(--border);
    --changelog-bullet-color: var(--accent-primary); /* For "✓" bullet */
    --changelog-entry-title-color: var(--text-primary);
    --changelog-entry-date-color: var(--text-secondary);
    --changelog-entry-text-color: var(--text-primary);
    --changelog-loading-color: var(--text-secondary);
    --changelog-error-color: var(--accent-primary);
}


/* --- THEME APPLICATION (body class switches these aliases) --- */

body.theme-dark {
    /* General dark theme aliases are already set in :root */
}

body.theme-light {
    --bg-main: var(--bg-main-light); --rgb-bg-main: var(--rgb-bg-main-light); --bg-elements: var(--bg-elements-light); --bg-section: var(--bg-section-light); --bg-subsection: var(--bg-subsection-light); --bg-hover: var(--bg-hover-light); --bg-active: var(--bg-active-light); --text-primary: var(--text-primary-light); --text-secondary: var(--text-secondary-light); --accent-primary: var(--accent-primary-light); --accent-secondary: var(--accent-secondary-light); --border: var(--border-light); --button-bg: var(--button-bg-light); --button-text: var(--button-text-light); --button-hover-bg: var(--button-hover-bg-light); --button-hover-text: var(--button-hover-text-light); --shadow-color: var(--shadow-color-light); --table-header-bg: var(--table-header-bg-light); --table-header-text: var(--table-header-text-light); --table-cell-bg-odd: var(--bg-section-light); --table-cell-bg-even: var(--bg-subsection-light); --table-cell-text: var(--table-cell-text-light); --table-cell-text-accent: var(--table-cell-text-accent-light); --table-border: var(--border-light); --vertical-progress-track-color: var(--vertical-progress-track-color-light); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-light); --current-chapter-info-bg: var(--current-chapter-info-bg-light); --current-chapter-info-text: var(--current-chapter-info-text-light); --scrollbar-thumb-color: var(--scrollbar-thumb-color-light); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-light);
    --accent-contrast-text: #FFFFFF;
    --image-figure-bg: var(--bg-section-light);
    --image-figure-border-color: var(--border-light);
    --image-figure-caption-text-color: var(--text-secondary-light);
    --blockquote-bg-default: var(--bg-hover-light);
    --blockquote-text-default: var(--text-primary-light);
    --blockquote-border-default: var(--accent-primary-light);
    --blockquote-header-text-color: var(--text-secondary-light);
    --blockquote-accent-note: #1976D2; --blockquote-bg-note: #E3F2FD; --blockquote-text-note: #1565C0;
    --blockquote-accent-danger: #D32F2F; --blockquote-bg-danger: #FFEBEE; --blockquote-text-danger: #C62828;
    --blockquote-accent-reminder: #FFA000; --blockquote-bg-reminder: #FFF8E1; --blockquote-text-reminder: #EF6C00;
    --blockquote-accent-quote: var(--text-secondary-light); --blockquote-bg-quote: var(--bg-subsection-light); --blockquote-text-quote: var(--text-secondary-light);
    --blockquote-accent-info: #0097A7; --blockquote-bg-info: #E0F7FA; --blockquote-text-info: #00838F;
    --blockquote-accent-news: #388E3C; --blockquote-bg-news: #E8F5E9; --blockquote-text-news: #2E7D32;
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-light);
    --changelog-intro-border: var(--accent-primary-light);
    --changelog-intro-text: var(--text-primary-light);
    --changelog-entry-border: var(--border-light);
    --changelog-bullet-color: var(--accent-primary-light);
    --changelog-entry-title-color: var(--text-primary-light);
    --changelog-entry-date-color: var(--text-secondary-light);
    --changelog-entry-text-color: var(--text-primary-light);
    --changelog-loading-color: var(--text-secondary-light);
    --changelog-error-color: var(--accent-primary-light);
}

body.theme-sunset {
    --bg-main: var(--bg-main-sunset); --rgb-bg-main: var(--rgb-bg-main-sunset); --bg-elements: var(--bg-elements-sunset); --bg-section: var(--bg-section-sunset); --bg-subsection: var(--bg-subsection-sunset); --bg-hover: var(--bg-hover-sunset); --bg-active: var(--bg-active-sunset); --text-primary: var(--text-primary-sunset); --text-secondary: var(--text-secondary-sunset); --accent-primary: var(--accent-primary-sunset); --accent-secondary: var(--accent-secondary-sunset); --border: var(--border-sunset); --button-bg: var(--button-bg-sunset); --button-text: var(--button-text-sunset); --button-hover-bg: var(--button-hover-bg-sunset); --button-hover-text: var(--button-hover-text-sunset); --shadow-color: var(--shadow-color-sunset); --table-header-bg: var(--table-header-bg-sunset); --table-header-text: var(--table-header-text-sunset); --table-cell-bg-odd: var(--bg-section-sunset); --table-cell-bg-even: var(--bg-subsection-sunset); --table-cell-text: var(--text-primary-sunset); --table-cell-text-accent: var(--accent-primary-sunset); --table-border: var(--border-sunset); --vertical-progress-track-color: var(--vertical-progress-track-color-sunset); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-sunset); --current-chapter-info-bg: var(--current-chapter-info-bg-sunset); --current-chapter-info-text: var(--text-primary-sunset); --scrollbar-thumb-color: var(--scrollbar-thumb-color-sunset); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-sunset);
    --accent-contrast-text: #4A2C24;
    --image-figure-bg: var(--bg-section-sunset);
    --image-figure-border-color: var(--border-sunset);
    --image-figure-caption-text-color: var(--text-secondary-sunset);
    --blockquote-bg-default: var(--bg-elements-sunset);
    --blockquote-text-default: var(--text-secondary-sunset);
    --blockquote-border-default: var(--accent-primary-sunset);
    --blockquote-header-text-color: var(--text-secondary-sunset);
    --blockquote-accent-note: var(--accent-secondary-sunset); --blockquote-bg-note: color-mix(in srgb, var(--accent-secondary-sunset) 15%, var(--bg-elements-sunset)); --blockquote-text-note: var(--text-primary-sunset);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-sunset);
    --changelog-intro-border: var(--accent-primary-sunset);
    --changelog-intro-text: var(--text-primary-sunset);
    --changelog-entry-border: var(--border-sunset);
    --changelog-bullet-color: var(--accent-primary-sunset);
    --changelog-entry-title-color: var(--text-primary-sunset);
    --changelog-entry-date-color: var(--text-secondary-sunset);
    --changelog-entry-text-color: var(--text-primary-sunset);
    --changelog-loading-color: var(--text-secondary-sunset);
    --changelog-error-color: var(--accent-primary-sunset);
}

body.theme-empire {
    --bg-main: var(--bg-main-empire); --rgb-bg-main: var(--rgb-bg-main-empire); --bg-elements: var(--bg-elements-empire); --bg-section: var(--bg-section-empire); --bg-subsection: var(--bg-subsection-empire); --bg-hover: var(--bg-hover-empire); --bg-active: var(--bg-active-empire); --text-primary: var(--text-primary-empire); --text-secondary: var(--text-secondary-empire); --accent-primary: var(--accent-primary-empire); --accent-secondary: var(--accent-secondary-empire); --border: var(--border-empire); --button-bg: var(--button-bg-empire); --button-text: var(--button-text-empire); --button-hover-bg: var(--button-hover-bg-empire); --button-hover-text: var(--button-hover-text-empire); --shadow-color: var(--shadow-color-empire); --table-header-bg: var(--table-header-bg-empire); --table-header-text: var(--table-header-text-empire); --table-cell-bg-odd: var(--bg-section-empire); --table-cell-bg-even: var(--bg-subsection-empire); --table-cell-text: var(--text-primary-empire); --table-cell-text-accent: var(--accent-primary-empire); --table-border: var(--border-empire); --vertical-progress-track-color: var(--vertical-progress-track-color-empire); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-empire); --current-chapter-info-bg: var(--current-chapter-info-bg-empire); --current-chapter-info-text: var(--text-primary-empire); --scrollbar-thumb-color: var(--scrollbar-thumb-color-empire); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-empire);
    --accent-contrast-text: #E0E0E0;
    --image-figure-bg: var(--bg-section-empire);
    --image-figure-border-color: var(--border-empire);
    --image-figure-caption-text-color: var(--text-secondary-empire);
    --blockquote-bg-default: var(--bg-elements-empire);
    --blockquote-text-default: var(--text-secondary-empire);
    --blockquote-border-default: var(--accent-primary-empire);
    --blockquote-header-text-color: var(--text-secondary-empire);
    --blockquote-accent-danger: var(--accent-secondary-empire); --blockquote-bg-danger: color-mix(in srgb, var(--accent-secondary-empire) 15%, var(--bg-elements-empire)); --blockquote-text-danger: var(--text-primary-empire);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-empire);
    --changelog-intro-border: var(--accent-primary-empire);
    --changelog-intro-text: var(--text-primary-empire);
    --changelog-entry-border: var(--border-empire);
    --changelog-bullet-color: var(--accent-primary-empire);
    --changelog-entry-title-color: var(--text-primary-empire);
    --changelog-entry-date-color: var(--text-secondary-empire);
    --changelog-entry-text-color: var(--text-primary-empire);
    --changelog-loading-color: var(--text-secondary-empire);
    --changelog-error-color: var(--accent-primary-empire);
}

body.theme-republic {
    --bg-main: var(--bg-main-republic); --rgb-bg-main: var(--rgb-bg-main-republic); --bg-elements: var(--bg-elements-republic); --bg-section: var(--bg-section-republic); --bg-subsection: var(--bg-subsection-republic); --bg-hover: var(--bg-hover-republic); --bg-active: var(--bg-active-republic); --text-primary: var(--text-primary-republic); --text-secondary: var(--text-secondary-republic); --accent-primary: var(--accent-primary-republic); --accent-secondary: var(--accent-secondary-republic); --border: var(--border-republic); --button-bg: var(--button-bg-republic); --button-text: var(--button-text-republic); --button-hover-bg: var(--button-hover-bg-republic); --button-hover-text: var(--button-hover-text-republic); --shadow-color: var(--shadow-color-republic); --table-header-bg: var(--table-header-bg-republic); --table-header-text: var(--table-header-text-republic); --table-cell-bg-odd: var(--bg-section-republic); --table-cell-bg-even: var(--bg-subsection-republic); --table-cell-text: var(--text-primary-republic); --table-cell-text-accent: var(--accent-primary-republic); --table-border: var(--border-republic); --vertical-progress-track-color: var(--vertical-progress-track-color-republic); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-republic); --current-chapter-info-bg: var(--current-chapter-info-bg-republic); --current-chapter-info-text: var(--text-primary-republic); --scrollbar-thumb-color: var(--scrollbar-thumb-color-republic); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-republic);
    --accent-contrast-text: #F5F5F5;
    --image-figure-bg: var(--bg-section-republic);
    --image-figure-border-color: var(--border-republic);
    --image-figure-caption-text-color: var(--text-secondary-republic);
    --blockquote-bg-default: var(--bg-hover-republic);
    --blockquote-text-default: var(--text-primary-republic);
    --blockquote-border-default: var(--accent-primary-republic);
    --blockquote-header-text-color: var(--text-secondary-republic);
    --blockquote-accent-news: var(--accent-secondary-republic); --blockquote-bg-news: color-mix(in srgb, var(--accent-secondary-republic) 20%, var(--bg-hover-republic)); --blockquote-text-news: var(--text-primary-republic);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-republic);
    --changelog-intro-border: var(--accent-primary-republic);
    --changelog-intro-text: var(--text-primary-republic);
    --changelog-entry-border: var(--border-republic);
    --changelog-bullet-color: var(--accent-primary-republic);
    --changelog-entry-title-color: var(--text-primary-republic);
    --changelog-entry-date-color: var(--text-secondary-republic);
    --changelog-entry-text-color: var(--text-primary-republic);
    --changelog-loading-color: var(--text-secondary-republic);
    --changelog-error-color: var(--accent-primary-republic);
}

body.theme-sands-of-serenity {
    --bg-main: var(--bg-main-sands-of-serenity); --rgb-bg-main: var(--rgb-bg-main-sands-of-serenity); --bg-elements: var(--bg-elements-sands-of-serenity); --bg-section: var(--bg-section-sands-of-serenity); --bg-subsection: var(--bg-subsection-sands-of-serenity); --bg-hover: var(--button-hover-bg-sands-of-serenity); --bg-active: color-mix(in srgb, var(--button-bg-sands-of-serenity) 90%, #000 10%); --text-primary: var(--text-primary-sands-of-serenity); --text-secondary: var(--text-secondary-sands-of-serenity); --accent-primary: var(--accent-primary-sands-of-serenity); --accent-secondary: var(--accent-secondary-sands-of-serenity); --border: var(--border-sands-of-serenity); --button-bg: var(--button-bg-sands-of-serenity); --button-text: var(--button-text-sands-of-serenity); --button-hover-bg: var(--button-hover-bg-sands-of-serenity); --button-hover-text: var(--button-hover-text-sands-of-serenity); --shadow-color: var(--shadow-color-sands-of-serenity); --neumorphic-dark-shadow: var(--neumorphic-dark-shadow-sands-of-serenity); --neumorphic-light-shadow: var(--neumorphic-light-shadow-sands-of-serenity); --neumorphic-shadow-offset: var(--neumorphic-shadow-offset-sands-of-serenity); --neumorphic-shadow-blur: var(--neumorphic-shadow-blur-sands-of-serenity); --neumorphic-border-radius: var(--neumorphic-border-radius-sands-of-serenity); --table-header-bg: var(--table-header-bg-sands-of-serenity); --table-header-text: var(--table-header-text-sands-of-serenity); --table-cell-bg-odd: var(--table-cell-bg-odd-sands-of-serenity); --table-cell-bg-even: var(--table-cell-bg-even-sands-of-serenity); --table-cell-text: var(--table-cell-text-sands-of-serenity); --table-cell-text-accent: var(--table-cell-text-accent-sands-of-serenity); --table-border: var(--table-border-sands-of-serenity); --vertical-progress-track-color: var(--vertical-progress-track-color-sands-of-serenity); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-sands-of-serenity); --current-chapter-info-bg: var(--current-chapter-info-bg-sands-of-serenity); --current-chapter-info-text: var(--current-chapter-info-text-sands-of-serenity); --scrollbar-thumb-color: var(--scrollbar-thumb-color-sands-of-serenity); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-sands-of-serenity);
    --accent-contrast-text: #5F4A3F;
    --image-figure-bg: var(--bg-elements-sands-of-serenity);
    --image-figure-border-color: var(--border-sands-of-serenity);
    --image-figure-caption-text-color: var(--text-secondary-sands-of-serenity);
    --blockquote-bg-default: var(--bg-elements-sands-of-serenity);
    --blockquote-text-default: var(--text-secondary-sands-of-serenity);
    --blockquote-border-default: var(--accent-primary-sands-of-serenity);
    --blockquote-header-text-color: var(--text-primary-sands-of-serenity);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-sands-of-serenity);
    --changelog-intro-border: var(--accent-primary-sands-of-serenity);
    --changelog-intro-text: var(--text-primary-sands-of-serenity);
    --changelog-entry-border: var(--table-border-sands-of-serenity); /* Using table border for consistency */
    --changelog-bullet-color: var(--accent-primary-sands-of-serenity);
    --changelog-entry-title-color: var(--text-primary-sands-of-serenity);
    --changelog-entry-date-color: var(--text-secondary-sands-of-serenity);
    --changelog-entry-text-color: var(--text-primary-sands-of-serenity);
    --changelog-loading-color: var(--text-secondary-sands-of-serenity);
    --changelog-error-color: var(--accent-primary-sands-of-serenity);
}

body.theme-moonlit-marble {
    --bg-main: var(--bg-main-moonlit-marble); --rgb-bg-main: var(--rgb-bg-main-moonlit-marble); --bg-elements: var(--bg-elements-moonlit-marble); --bg-section: var(--bg-section-moonlit-marble); --bg-subsection: var(--bg-subsection-moonlit-marble); --bg-hover: var(--button-hover-bg-moonlit-marble); --bg-active: color-mix(in srgb, var(--button-bg-moonlit-marble) 90%, #000 10%); --text-primary: var(--text-primary-moonlit-marble); --text-secondary: var(--text-secondary-moonlit-marble); --accent-primary: var(--accent-primary-moonlit-marble); --accent-secondary: var(--accent-secondary-moonlit-marble); --border: var(--border-moonlit-marble); --button-bg: var(--button-bg-moonlit-marble); --button-text: var(--button-text-moonlit-marble); --button-hover-bg: var(--button-hover-bg-moonlit-marble); --button-hover-text: var(--button-hover-text-moonlit-marble); --shadow-color: var(--shadow-color-moonlit-marble); --neumorphic-dark-shadow: var(--neumorphic-dark-shadow-moonlit-marble); --neumorphic-light-shadow: var(--neumorphic-light-shadow-moonlit-marble); --neumorphic-shadow-offset: var(--neumorphic-shadow-offset-moonlit-marble); --neumorphic-shadow-blur: var(--neumorphic-shadow-blur-moonlit-marble); --neumorphic-border-radius: var(--neumorphic-border-radius-moonlit-marble); --table-header-bg: var(--table-header-bg-moonlit-marble); --table-header-text: var(--table-header-text-moonlit-marble); --table-cell-bg-odd: var(--table-cell-bg-odd-moonlit-marble); --table-cell-bg-even: var(--table-cell-bg-even-moonlit-marble); --table-cell-text: var(--table-cell-text-moonlit-marble); --table-cell-text-accent: var(--accent-primary-moonlit-marble); --table-border: var(--table-border-moonlit-marble); --vertical-progress-track-color: var(--vertical-progress-track-color-moonlit-marble); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-moonlit-marble); --current-chapter-info-bg: var(--current-chapter-info-bg-moonlit-marble); --current-chapter-info-text: var(--current-chapter-info-text-moonlit-marble); --scrollbar-thumb-color: var(--scrollbar-thumb-color-moonlit-marble); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-moonlit-marble);
    --accent-contrast-text: #FFFFFF;
    --image-figure-bg: var(--bg-elements-moonlit-marble);
    --image-figure-border-color: var(--border-moonlit-marble);
    --image-figure-caption-text-color: var(--text-secondary-moonlit-marble);
    --blockquote-bg-default: var(--bg-elements-moonlit-marble);
    --blockquote-text-default: var(--text-secondary-moonlit-marble);
    --blockquote-border-default: var(--accent-primary-moonlit-marble);
    --blockquote-header-text-color: var(--text-primary-moonlit-marble);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-moonlit-marble);
    --changelog-intro-border: var(--accent-primary-moonlit-marble);
    --changelog-intro-text: var(--text-primary-moonlit-marble);
    --changelog-entry-border: var(--table-border-moonlit-marble);
    --changelog-bullet-color: var(--accent-primary-moonlit-marble);
    --changelog-entry-title-color: var(--text-primary-moonlit-marble);
    --changelog-entry-date-color: var(--text-secondary-moonlit-marble);
    --changelog-entry-text-color: var(--text-primary-moonlit-marble);
    --changelog-loading-color: var(--text-secondary-moonlit-marble);
    --changelog-error-color: var(--accent-primary-moonlit-marble);
}

body.theme-crystal-coral-reef {
    --bg-main: var(--bg-main-crystal-coral-reef); --rgb-bg-main: var(--rgb-bg-main-crystal-coral-reef); --bg-elements: var(--bg-elements-crystal-coral-reef); --bg-section: var(--bg-section-crystal-coral-reef); --bg-subsection: var(--bg-subsection-crystal-coral-reef); --bg-hover: color-mix(in srgb, var(--bg-elements-crystal-coral-reef) 80%, #fff 20%); --bg-active: color-mix(in srgb, var(--bg-elements-crystal-coral-reef) 70%, #fff 30%); --text-primary: var(--text-primary-crystal-coral-reef); --text-secondary: var(--text-secondary-crystal-coral-reef); --accent-primary: var(--accent-primary-crystal-coral-reef); --accent-secondary: var(--accent-secondary-coral-reef); --accent-tertiary: var(--accent-tertiary-crystal-coral-reef); --border: var(--border-crystal-coral-reef); --button-bg: var(--button-bg-crystal-coral-reef); --button-text: var(--button-text-crystal-coral-reef); --button-hover-bg: var(--button-hover-bg-crystal-coral-reef); --button-hover-text: var(--button-hover-text-crystal-coral-reef); --shadow-color: var(--shadow-color-crystal-coral-reef); --glassmorphic-blur: var(--glassmorphic-blur-crystal-coral-reef); --glassmorphic-border-radius: var(--glassmorphic-border-radius-crystal-coral-reef); --table-header-bg: var(--table-header-bg-crystal-coral-reef); --table-header-text: var(--table-header-text-crystal-coral-reef); --table-cell-bg-odd: var(--table-cell-bg-odd-crystal-coral-reef); --table-cell-bg-even: var(--table-cell-bg-even-crystal-coral-reef); --table-cell-text: var(--table-cell-text-crystal-coral-reef); --table-cell-text-accent: var(--table-cell-text-accent-crystal-coral-reef); --table-border: var(--table-border-crystal-coral-reef); --vertical-progress-track-color: var(--vertical-progress-track-color-crystal-coral-reef); --vertical-progress-indicator-color-default: rgba(255,255,255,0.4); --current-chapter-info-bg: var(--current-chapter-info-bg-crystal-coral-reef); --current-chapter-info-text: var(--current-chapter-info-text-crystal-coral-reef); --scrollbar-thumb-color: var(--scrollbar-thumb-color-crystal-coral-reef); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-crystal-coral-reef);
    --accent-contrast-text: #00363A;
    --image-figure-bg: var(--bg-section-crystal-coral-reef);
    --image-figure-border-color: var(--border-crystal-coral-reef);
    --image-figure-caption-text-color: var(--text-secondary-crystal-coral-reef);
    --blockquote-bg-default: var(--bg-elements-crystal-coral-reef);
    --blockquote-text-default: var(--text-primary-crystal-coral-reef);
    --blockquote-border-default: var(--accent-primary-crystal-coral-reef);
    --blockquote-header-text-color: var(--text-secondary-crystal-coral-reef);
    --blockquote-accent-note: var(--accent-secondary-coral-reef); --blockquote-bg-note: color-mix(in srgb, var(--accent-secondary-coral-reef) 25%, var(--bg-main-crystal-coral-reef) 75%); --blockquote-text-note: var(--text-primary-crystal-coral-reef);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-crystal-coral-reef);
    --changelog-intro-border: var(--accent-primary-crystal-coral-reef);
    --changelog-intro-text: var(--text-primary-crystal-coral-reef);
    --changelog-entry-border: var(--border-crystal-coral-reef);
    --changelog-bullet-color: var(--accent-primary-crystal-coral-reef);
    --changelog-entry-title-color: var(--text-primary-crystal-coral-reef);
    --changelog-entry-date-color: var(--text-secondary-crystal-coral-reef);
    --changelog-entry-text-color: var(--text-primary-crystal-coral-reef);
    --changelog-loading-color: var(--text-secondary-crystal-coral-reef);
    --changelog-error-color: var(--accent-primary-crystal-coral-reef);
}

body.theme-neon-frostbite {
    --bg-main: var(--bg-main-neon-frostbite); --rgb-bg-main: var(--rgb-bg-main-neon-frostbite); --bg-elements: var(--bg-elements-neon-frostbite); --bg-section: var(--bg-section-neon-frostbite); --bg-subsection: var(--bg-subsection-neon-frostbite); --bg-hover: color-mix(in srgb, var(--bg-elements-neon-frostbite) 80%, #000 20%); --bg-active: color-mix(in srgb, var(--bg-elements-neon-frostbite) 70%, #000 30%); --text-primary: var(--text-primary-neon-frostbite); --text-secondary: var(--text-secondary-neon-frostbite); --accent-primary: var(--accent-primary-neon-frostbite); --accent-secondary: var(--accent-secondary-neon-frostbite); --accent-tertiary: var(--accent-highlight-neon-frostbite); --border: var(--border-neon-frostbite); --button-bg: var(--button-bg-neon-frostbite); --button-text: var(--button-text-neon-frostbite); --button-hover-bg: var(--button-hover-bg-neon-frostbite); --button-hover-text: var(--button-hover-text-neon-frostbite); --shadow-color: var(--shadow-color-neon-frostbite); --glassmorphic-blur: var(--glassmorphic-blur-neon-frostbite); --glassmorphic-border-radius: var(--glassmorphic-border-radius-neon-frostbite); --table-header-bg: var(--table-header-bg-neon-frostbite); --table-header-text: var(--table-header-text-neon-frostbite); --table-cell-bg-odd: var(--table-cell-bg-odd-neon-frostbite); --table-cell-bg-even: var(--table-cell-bg-even-neon-frostbite); --table-cell-text: var(--text-primary-neon-frostbite); --table-cell-text-accent: var(--accent-primary-neon-frostbite); --table-border: var(--table-border-neon-frostbite); --vertical-progress-track-color: rgba(0,229,255,0.15); --vertical-progress-indicator-color-default: rgba(0,229,255,0.3); --current-chapter-info-bg: var(--current-chapter-info-bg-neon-frostbite); --current-chapter-info-text: var(--current-chapter-info-text-neon-frostbite); --scrollbar-thumb-color: rgba(0,229,255,0.2); --scrollbar-thumb-hover-color: rgba(0,229,255,0.4);
    --accent-contrast-text: #000000;
    --image-figure-bg: var(--bg-section-neon-frostbite);
    --image-figure-border-color: var(--border-neon-frostbite);
    --image-figure-caption-text-color: var(--text-secondary-neon-frostbite);
    --blockquote-bg-default: var(--bg-elements-neon-frostbite);
    --blockquote-text-default: var(--text-secondary-neon-frostbite);
    --blockquote-border-default: var(--accent-primary-neon-frostbite);
    --blockquote-header-text-color: var(--accent-secondary-neon-frostbite);
    --blockquote-accent-note: var(--accent-primary-neon-frostbite); --blockquote-bg-note: color-mix(in srgb, var(--accent-primary-neon-frostbite) 10%, var(--bg-elements-neon-frostbite)); --blockquote-text-note: var(--text-primary-neon-frostbite);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-neon-frostbite);
    --changelog-intro-border: var(--accent-primary-neon-frostbite);
    --changelog-intro-text: var(--text-primary-neon-frostbite);
    --changelog-entry-border: var(--border-neon-frostbite);
    --changelog-bullet-color: var(--accent-primary-neon-frostbite);
    --changelog-entry-title-color: var(--text-primary-neon-frostbite);
    --changelog-entry-date-color: var(--text-secondary-neon-frostbite);
    --changelog-entry-text-color: var(--text-primary-neon-frostbite);
    --changelog-loading-color: var(--text-secondary-neon-frostbite);
    --changelog-error-color: var(--accent-primary-neon-frostbite);
}

body.theme-cyber-twilight-glow {
    --bg-main: var(--bg-main-cyber-twilight-glow); --rgb-bg-main: var(--rgb-bg-main-cyber-twilight-glow); --bg-elements: var(--bg-elements-cyber-twilight-glow); --bg-section: var(--bg-section-cyber-twilight-glow); --bg-subsection: var(--bg-subsection-cyber-twilight-glow); --bg-hover: color-mix(in srgb, var(--accent-primary-cyber-twilight-glow) 10%, transparent); --bg-active: color-mix(in srgb, var(--accent-primary-cyber-twilight-glow) 20%, transparent); --text-primary: var(--text-primary-cyber-twilight-glow); --text-secondary: var(--text-secondary-cyber-twilight-glow); --accent-primary: var(--accent-primary-cyber-twilight-glow); --accent-secondary: var(--accent-secondary-cyber-twilight-glow); --border: var(--border-cyber-twilight-glow); --button-bg: var(--button-bg-cyber-twilight-glow); --button-text: var(--button-text-cyber-twilight-glow); --button-hover-bg: var(--button-hover-bg-cyber-twilight-glow); --button-hover-text: var(--button-hover-text-cyber-twilight-glow); --shadow-color: var(--glow-highlight-cyber-twilight-glow); --table-header-bg: var(--table-header-bg-cyber-twilight-glow); --table-header-text: var(--table-header-text-cyber-twilight-glow); --table-cell-bg-odd: var(--table-cell-bg-odd-cyber-twilight-glow); --table-cell-bg-even: var(--table-cell-bg-even-cyber-twilight-glow); --table-cell-text: var(--text-primary-cyber-twilight-glow); --table-cell-text-accent: var(--accent-primary-cyber-twilight-glow); --table-border: var(--table-border-cyber-twilight-glow); --vertical-progress-track-color: var(--vertical-progress-track-color-cyber-twilight-glow); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-cyber-twilight-glow); --current-chapter-info-bg: var(--current-chapter-info-bg-cyber-twilight-glow); --current-chapter-info-text: var(--text-primary-cyber-twilight-glow); --scrollbar-thumb-color: var(--scrollbar-thumb-color-cyber-twilight-glow); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-cyber-twilight-glow);
    --accent-contrast-text: #000000;
    --image-figure-bg: var(--bg-section-cyber-twilight-glow);
    --image-figure-border-color: color-mix(in srgb, var(--accent-primary-cyber-twilight-glow) 40%, transparent);
    --image-figure-caption-text-color: var(--text-secondary-cyber-twilight-glow);
    --blockquote-bg-default: var(--bg-elements-cyber-twilight-glow);
    --blockquote-text-default: var(--text-secondary-cyber-twilight-glow);
    --blockquote-border-default: var(--accent-primary-cyber-twilight-glow);
    --blockquote-header-text-color: var(--accent-secondary-cyber-twilight-glow);
    --blockquote-accent-note: var(--accent-primary-cyber-twilight-glow); --blockquote-bg-note: color-mix(in srgb, var(--accent-primary-cyber-twilight-glow) 8%, var(--bg-elements-cyber-twilight-glow)); --blockquote-text-note: var(--text-primary-cyber-twilight-glow);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-cyber-twilight-glow);
    --changelog-intro-border: var(--accent-primary-cyber-twilight-glow);
    --changelog-intro-text: var(--text-primary-cyber-twilight-glow);
    --changelog-entry-border: var(--border-cyber-twilight-glow);
    --changelog-bullet-color: var(--accent-primary-cyber-twilight-glow);
    --changelog-entry-title-color: var(--text-primary-cyber-twilight-glow);
    --changelog-entry-date-color: var(--text-secondary-cyber-twilight-glow);
    --changelog-entry-text-color: var(--text-primary-cyber-twilight-glow);
    --changelog-loading-color: var(--text-secondary-cyber-twilight-glow);
    --changelog-error-color: var(--accent-primary-cyber-twilight-glow);
}

body.theme-midnight-circuit-pulse {
    --bg-main: var(--bg-main-midnight-circuit-pulse); --rgb-bg-main: var(--rgb-bg-main-midnight-circuit-pulse); --bg-elements: var(--bg-elements-midnight-circuit-pulse); --bg-section: var(--bg-section-midnight-circuit-pulse); --bg-subsection: var(--bg-subsection-midnight-circuit-pulse); --bg-hover: color-mix(in srgb, var(--accent-primary-midnight-circuit-pulse) 10%, transparent); --bg-active: color-mix(in srgb, var(--accent-primary-midnight-circuit-pulse) 20%, transparent); --text-primary: var(--text-primary-midnight-circuit-pulse); --text-secondary: var(--text-secondary-midnight-circuit-pulse); --accent-primary: var(--accent-primary-midnight-circuit-pulse); --accent-secondary: var(--accent-secondary-midnight-circuit-pulse); --border: var(--border-midnight-circuit-pulse); --button-bg: var(--button-bg-midnight-circuit-pulse); --button-text: var(--button-text-midnight-circuit-pulse); --button-hover-bg: var(--button-hover-bg-midnight-circuit-pulse); --button-hover-text: var(--button-hover-text-midnight-circuit-pulse); --shadow-color: var(--glow-highlight-midnight-circuit-pulse); --table-header-bg: var(--table-header-bg-midnight-circuit-pulse); --table-header-text: var(--table-header-text-midnight-circuit-pulse); --table-cell-bg-odd: var(--table-cell-bg-odd-midnight-circuit-pulse); --table-cell-bg-even: var(--table-cell-bg-even-midnight-circuit-pulse); --table-cell-text: var(--text-primary-midnight-circuit-pulse); --table-cell-text-accent: var(--accent-primary-midnight-circuit-pulse); --table-border: var(--border-midnight-circuit-pulse); --vertical-progress-track-color: var(--vertical-progress-track-color-midnight-circuit-pulse); --vertical-progress-indicator-color-default: var(--vertical-progress-indicator-color-default-midnight-circuit-pulse); --current-chapter-info-bg: var(--current-chapter-info-bg-midnight-circuit-pulse); --current-chapter-info-text: var(--text-primary-midnight-circuit-pulse); --scrollbar-thumb-color: var(--scrollbar-thumb-color-midnight-circuit-pulse); --scrollbar-thumb-hover-color: var(--scrollbar-thumb-hover-color-midnight-circuit-pulse);
    --accent-contrast-text: #000000;
    --image-figure-bg: var(--bg-section-midnight-circuit-pulse);
    --image-figure-border-color: color-mix(in srgb, var(--accent-primary-midnight-circuit-pulse) 40%, transparent);
    --image-figure-caption-text-color: var(--text-secondary-midnight-circuit-pulse);
    --blockquote-bg-default: var(--bg-elements-midnight-circuit-pulse);
    --blockquote-text-default: var(--text-secondary-midnight-circuit-pulse);
    --blockquote-border-default: var(--accent-primary-midnight-circuit-pulse);
    --blockquote-header-text-color: var(--accent-secondary-midnight-circuit-pulse);
    --blockquote-accent-note: var(--accent-primary-midnight-circuit-pulse); --blockquote-bg-note: color-mix(in srgb, var(--accent-primary-midnight-circuit-pulse) 8%, var(--bg-elements-midnight-circuit-pulse)); --blockquote-text-note: var(--text-primary-midnight-circuit-pulse);
    /* NEW: Changelog & Quiz specific colors */
    --changelog-intro-bg: var(--bg-subsection-midnight-circuit-pulse);
    --changelog-intro-border: var(--accent-primary-midnight-circuit-pulse);
    --changelog-intro-text: var(--text-primary-midnight-circuit-pulse);
    --changelog-entry-border: var(--border-midnight-circuit-pulse);
    --changelog-bullet-color: var(--accent-primary-midnight-circuit-pulse);
    --changelog-entry-title-color: var(--text-primary-midnight-circuit-pulse);
    --changelog-entry-date-color: var(--text-secondary-midnight-circuit-pulse);
    --changelog-entry-text-color: var(--text-primary-midnight-circuit-pulse);
    --changelog-loading-color: var(--text-secondary-midnight-circuit-pulse);
    --changelog-error-color: var(--accent-primary-midnight-circuit-pulse);
}


/* --- RESPONSIVE VARIABLE OVERRIDES --- */
@media (max-width: 1199px) {
    :root {
        --content-max-width: 100ch;
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 65px; 
        --content-max-width: 100%;
    }
}