/* CSS Variables for Magistudier.dk - Dark/Light Theme Support */

/* Prevent flash of unstyled content during theme loading */
html:not([data-theme-loaded]) body {
    visibility: hidden;
}

html[data-theme-loaded] body {
    visibility: visible;
}

:root {
    /* Light Theme (Default) - Victorian Library Style */
    --color-primary-bg: #F4F1EC;
    --color-secondary-bg: #E2D8CF;
    --color-tertiary-bg: #E2D8CF;
    --color-panel-bg: #FBFAF7;
    --color-panel-border: #CDBFB0;
    --color-body-bg: #655A5A;
    --color-body-bg-gradient-start: #655A5A;
    --color-body-bg-gradient-mid: #655A5A;
    --color-body-bg-gradient-end: #655A5A;
    
    --color-text-primary: #2C2622;
    --color-text-secondary: #2C2622;
    --color-text-muted: #776A61;
    
    --color-link: #1A1A1A;
    --color-link-hover: #2C2622;
    --color-cta: #D97A4A;
    --color-cta-hover: #E58F61;
    
    --color-border: #CDBFB0;
    --color-border-light: #E2D8CF;
    --color-border-dark: #CDBFB0;
    
    --color-input-bg: #FFFFFF;
    --color-input-border: #CDBFB0;
    --color-input-text: #2C2622;
    
    --color-nav-bg: linear-gradient(135deg, #F4F1EC 0%, #E2D8CF 100%);
    --color-nav-border: #CDBFB0;
    --color-nav-text: #2C2622;
    --color-nav-hover-bg: #D97A4A;
    --color-nav-hover-text: #FFFFFF;
    
    --color-dropdown-bg: linear-gradient(135deg, #F4F1EC 0%, #FBFAF7 100%);
    --color-dropdown-border: #CDBFB0;
    --color-dropdown-hover-bg: linear-gradient(135deg, #E2D8CF 0%, #FAECE1 100%);
    --color-dropdown-text: #2C2622;
    --color-dropdown-link: #D97A4A;
    --color-dropdown-link-hover: #E58F61;
    
    --color-icon-border: #D97A4A;
    --color-icon-bg: linear-gradient(135deg, #F4F1EC 0%, #FBFAF7 100%);
    --color-icon-hover-border: #E58F61;
    --color-icon-hover-bg: linear-gradient(135deg, #E2D8CF 0%, #FAECE1 100%);
    
    --color-badge-bg: linear-gradient(135deg, #B85C5C 0%, #A84C4C 100%);
    --color-badge-text: #FFFFFF;
    --color-badge-border: #D97A4A;
    
    --color-profile-info-bg: linear-gradient(135deg, #E2D8CF 0%, #FAECE1 100%);
    --color-profile-info-border: #CDBFB0;
    
    --color-shadow: rgba(0, 0, 0, 0.15);
    --color-shadow-hover: rgba(217, 122, 74, 0.5);
    --color-shadow-dropdown: rgba(0, 0, 0, 0.3);
    
    /* Login page specific variables */
    --color-login-container-bg: linear-gradient(135deg, #F4F1EC 0%, #FBFAF7 100%);
    --color-login-container-border: #CDBFB0;
    --color-login-header-border: rgba(44, 38, 34, 0.35);
    --color-login-accent-top: linear-gradient(90deg, #D97A4A, #E58F61, #D97A4A);
    --color-login-success-bg: linear-gradient(135deg, #4A7C59 0%, #5A9C69 100%);
    --color-login-error-bg: linear-gradient(135deg, #B85C5C 0%, #A84C4C 100%);
    --color-login-shadow: rgba(0, 0, 0, 0.2);
    --color-login-shadow-inset: rgba(255, 255, 255, 0.5);
    --color-login-shadow-box: rgba(110, 88, 74, 0.3);
    
    /* Reset password page specific variables */
    --color-reset-container-bg: #C9B090;
    --color-reset-container-border: #000;
    --color-reset-input-bg: #BA9E7B;
    --color-reset-input-border: #AA9172;
    --color-reset-input-focus-bg: #C9B090;
    --color-reset-input-focus-border: #AB884C;
    --color-reset-submit-bg: #AB884C;
    --color-reset-submit-hover: #C9A25B;
    --color-reset-success-bg: #4E3B31;
    --color-reset-error-bg: #7F0909;
    
    /* House Colors (same for both themes) */
    --color-gryffindor: #7F0909;
    --color-slytherin: #0D6217;
    --color-ravenclaw: #0E1A40;
    --color-hufflepuff: #EEE117;
    
    /* Additional color variables - Light theme */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-text-white: #FFFFFF;
    --color-border-black: #000000;
    --color-menu-divider: #888888;
    --color-menu-divider-dark: rgba(56, 56, 56, 0.76);
    --color-profile-bg: var(--color-secondary-bg);
    --color-profile-bg-light: var(--color-primary-bg);
    --color-profile-bg-dark: var(--color-tertiary-bg);
    --color-profile-text-dark: var(--color-text-primary);
    --color-profile-shadow: rgba(0, 0, 0, 0.3);
    --color-success-bg: linear-gradient(135deg, #4A7C59 0%, #5A9C69 100%);
    --color-success-text: #4A7C59;
    --color-error-bg: linear-gradient(135deg, #B85C5C 0%, #A84C4C 100%);
    --color-error-text: #B85C5C;
    --color-facebook-bg: var(--color-secondary-bg);
    --color-gold: #FFD700;
    --color-text-dark: #2C2622;
    --color-warning-bg: #FAECE1;
    --color-warning-border: #D97A4A;
    --color-warning-text: #2C2622;
    
    /* New color palette additions */
    --color-accent-soft: #FAECE1;
    --color-muted-bg: #E2D8CF;
    --color-card-bg: #FBFAF7;
}

[data-theme="dark"] {
    /* Dark Theme - Victorian Library with Dimmed Lighting */
    --color-primary-bg: #3E2F25;
    --color-secondary-bg: #4E3B31;
    --color-tertiary-bg: #5E4B41;
    --color-panel-bg: #4E3B31;
    --color-panel-border: #2A221B;
    --color-body-bg: #655A5A;
    --color-body-bg-gradient-start: #655A5A;
    --color-body-bg-gradient-mid: #655A5A;
    --color-body-bg-gradient-end: #655A5A;
    
    --color-text-primary: #F6F0E6;
    --color-text-secondary: #E7E1DB;
    --color-text-muted: #D8D2CC;
    
    --color-link: #C9A25B;
    --color-link-hover: #E2C08A;
    --color-cta: #C9A25B;
    --color-cta-hover: #E2C08A;
    
    --color-border: #2A221B;
    --color-border-light: #3E2F25;
    --color-border-dark: #1A1510;
    
    --color-input-bg: #4E3B31;
    --color-input-border: #3E2F25;
    --color-input-text: #F6F0E6;
    
    --color-nav-bg: linear-gradient(135deg, #3E2F25 0%, #4E3B31 100%);
    --color-nav-border: #2A221B;
    --color-nav-text: #F6F0E6;
    --color-nav-hover-bg: #C9A25B;
    --color-nav-hover-text: #2A221B;
    
    --color-dropdown-bg: linear-gradient(135deg, #4E3B31 0%, #3E2F25 100%);
    --color-dropdown-border: #2A221B;
    --color-dropdown-hover-bg: linear-gradient(135deg, #5E4B41 0%, #4E3B31 100%);
    --color-dropdown-text: #F6F0E6;
    
    --color-icon-border: #C9A25B;
    --color-icon-bg: linear-gradient(135deg, #4E3B31 0%, #3E2F25 100%);
    --color-icon-hover-border: #E2C08A;
    --color-icon-hover-bg: linear-gradient(135deg, #5E4B41 0%, #4E3B31 100%);
    
    --color-badge-bg: linear-gradient(135deg, #B85C5C 0%, #A84C4C 100%);
    --color-badge-text: #FFFFFF;
    --color-badge-border: #C9A25B;
    
    --color-profile-info-bg: linear-gradient(135deg, #4E3B31 0%, #3E2F25 100%);
    --color-profile-info-border: #2A221B;
    
    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-shadow-hover: rgba(201, 162, 91, 0.5);
    --color-shadow-dropdown: rgba(0, 0, 0, 0.5);
    
    /* Login page specific variables - Dark theme */
    --color-login-container-bg: linear-gradient(135deg, #4E3B31 0%, #3E2F25 100%);
    --color-login-container-border: #2A221B;
    --color-login-header-border: rgba(246, 240, 230, 0.2);
    --color-login-accent-top: linear-gradient(90deg, #C9A25B, #E2C08A, #C9A25B);
    --color-login-success-bg: linear-gradient(135deg, #4A7C59 0%, #5A9C69 100%);
    --color-login-error-bg: linear-gradient(135deg, #B85C5C 0%, #A84C4C 100%);
    --color-login-shadow: rgba(0, 0, 0, 0.5);
    --color-login-shadow-inset: rgba(255, 255, 255, 0.1);
    --color-login-shadow-box: rgba(201, 162, 91, 0.3);
    
    /* Reset password page specific variables - Dark theme */
    --color-reset-container-bg: #4E3B31;
    --color-reset-container-border: #2A221B;
    --color-reset-input-bg: #3E2F25;
    --color-reset-input-border: #2A221B;
    --color-reset-input-focus-bg: #4E3B31;
    --color-reset-input-focus-border: #C9A25B;
    --color-reset-submit-bg: #C9A25B;
    --color-reset-submit-hover: #E2C08A;
    --color-reset-success-bg: #4E3B31;
    --color-reset-error-bg: #7F0909;
    
    /* Additional color variables - Dark theme */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-text-white: #FFFFFF;
    --color-border-black: #000000;
    --color-menu-divider: #666666;
    --color-menu-divider-dark: rgba(56, 56, 56, 0.76);
    --color-profile-bg: var(--color-secondary-bg);
    --color-profile-bg-light: var(--color-primary-bg);
    --color-profile-bg-dark: var(--color-tertiary-bg);
    --color-profile-text-dark: var(--color-text-primary);
    --color-profile-shadow: rgba(62, 47, 37, 1);
    --color-success-bg: linear-gradient(135deg, #4A7C59 0%, #5A9C69 100%);
    --color-success-text: #5A9C69;
    --color-error-bg: linear-gradient(135deg, #B85C5C 0%, #A84C4C 100%);
    --color-error-text: #B85C5C;
    --color-facebook-bg: var(--color-secondary-bg);
    --color-gold: #FFD700;
    --color-text-dark: #F6F0E6;
    --color-warning-bg: #3E2F25;
    --color-warning-border: #C9A25B;
    --color-warning-text: #E2C08A;
    
    /* New color palette additions - Dark theme */
    --color-accent-soft: #3E2F25;
    --color-muted-bg: #4E3B31;
    --color-card-bg: #4E3B31;
}