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

: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;
    
    /* ===== PWA SPECIFIC VARIABLES ===== */
    
    /* PWA Color System */
    --pwa-bg-primary: var(--color-panel-bg);
    --pwa-bg-secondary: var(--color-secondary-bg);
    --pwa-bg-tertiary: var(--color-tertiary-bg);
    --pwa-modal-bg: var(--color-panel-bg);
    --pwa-modal-bg-rgb: 251, 250, 247; /* For rgba usage */
    --pwa-modal-border: var(--color-panel-border);
    --pwa-overlay-bg: rgba(42, 34, 27, 0.95);
    
    /* PWA Text Colors */
    --pwa-text-primary: var(--color-text-primary);
    --pwa-text-secondary: var(--color-text-secondary);
    --pwa-text-muted: var(--color-text-muted);
    
    /* PWA Accent Colors */
    --pwa-accent: var(--color-cta);
    --pwa-accent-hover: var(--color-cta-hover);
    --pwa-button-text: #FFFFFF;
    
    /* PWA Border System */
    --pwa-border: var(--color-border);
    --pwa-border-light: var(--color-border-light);
    --pwa-border-dark: var(--color-border-dark);
    
    /* PWA Status Colors */
    --pwa-success: #4A7C59;
    --pwa-warning: #D97A4A;
    --pwa-error: #B85C5C;
    --pwa-info: var(--color-cta);
    
    /* PWA Spacing System */
    --pwa-spacing-xs: 4px;
    --pwa-spacing-sm: 8px;
    --pwa-spacing-md: 16px;
    --pwa-spacing-lg: 24px;
    --pwa-spacing-xl: 32px;
    --pwa-spacing-2xl: 48px;
    
    /* PWA Typography System */
    --pwa-font-xs: 12px;
    --pwa-font-sm: 14px;
    --pwa-font-base: 16px;
    --pwa-font-lg: 18px;
    --pwa-font-xl: 20px;
    --pwa-font-2xl: 24px;
    --pwa-font-3xl: 30px;
    
    /* PWA Border Radius System */
    --pwa-radius-sm: 4px;
    --pwa-radius: 6px;
    --pwa-radius-lg: 12px;
    --pwa-radius-xl: 16px;
    --pwa-radius-2xl: 24px;
    --pwa-radius-full: 50%;
    
    /* PWA Shadow System */
    --pwa-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    --pwa-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);
    --pwa-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.25);
    --pwa-shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.3);
    
    /* PWA Z-Index System */
    --pwa-z-base: 1;
    --pwa-z-dropdown: 1000;
    --pwa-z-sticky: 1020;
    --pwa-z-fixed: 1030;
    --pwa-z-overlay: 1040;
    --pwa-z-modal: 1050;
    --pwa-z-notification: 1060;
    --pwa-z-tooltip: 1070;
    
    /* PWA Animation System */
    --pwa-transition-duration: 0.3s;
    --pwa-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --pwa-transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --pwa-transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --pwa-transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
    
    /* PWA Backdrop Filter */
    --pwa-backdrop-blur: blur(8px);
    --pwa-backdrop-blur-lg: blur(16px);
}

[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;
    
    /* ===== PWA SPECIFIC VARIABLES - DARK THEME ===== */
    
    /* PWA Color System - Dark */
    --pwa-bg-primary: var(--color-panel-bg);
    --pwa-bg-secondary: var(--color-secondary-bg);
    --pwa-bg-tertiary: var(--color-tertiary-bg);
    --pwa-modal-bg: var(--color-panel-bg);
    --pwa-modal-bg-rgb: 78, 59, 49; /* For rgba usage */
    --pwa-modal-border: var(--color-panel-border);
    --pwa-overlay-bg: rgba(42, 34, 27, 0.95);
    
    /* PWA Text Colors - Dark */
    --pwa-text-primary: var(--color-text-primary);
    --pwa-text-secondary: var(--color-text-secondary);
    --pwa-text-muted: var(--color-text-muted);
    
    /* PWA Accent Colors - Dark */
    --pwa-accent: var(--color-cta);
    --pwa-accent-hover: var(--color-cta-hover);
    --pwa-button-text: #2A221B;
    
    /* PWA Border System - Dark */
    --pwa-border: var(--color-border);
    --pwa-border-light: var(--color-border-light);
    --pwa-border-dark: var(--color-border-dark);
    
    /* PWA Status Colors - Dark */
    --pwa-success: #5A9C69;
    --pwa-warning: #E58F61;
    --pwa-error: #B85C5C;
    --pwa-info: var(--color-cta);
    
    /* PWA Shadow System - Dark */
    --pwa-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    --pwa-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
    --pwa-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
    --pwa-shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.7);
}