/* ===================================
   ALTITUDO CORE STYLES
   Combined file for components used on every page
   
   Contents:
   1. Theme Variables (Light & Dark Mode)
   2. Theme Toggle Component
   3. Language Selector Component
   =================================== */

/* ===================================
   1. THEME VARIABLES
   =================================== */

:root {
    /* ===================================
       LIGHT MODE (Default)
       =================================== */
    
    /* Brand Colors */
    --color-primary: #E9C780;      /* SunriseGold */
    --color-primary-dark: #C4A864; /* Darker gold variant */
    --color-secondary: #35B7C8;    /* GlacierCyan */
    --color-tertiary: #2A3E74;     /* TwilightIndigo */
    
    /* Background Colors */
    --bg-primary: #FFFFFF;         /* Main backgrounds (cards, modals, dropdowns) */
    --bg-secondary: #F9FAFB;       /* Subtle backgrounds (sections, hover states) */
    --bg-tertiary: #F3F4F6;        /* Muted backgrounds (disabled, inactive) */
    --bg-page: #FFFFFF;            /* Page background */
    
    /* Text Colors */
    --text-primary: #1D294A;       /* Main text (headings, body) */
    --text-secondary: #6B7280;     /* Secondary text (descriptions, labels) */
    --text-tertiary: #9CA3AF;      /* Tertiary text (hints, placeholders) */
    --text-on-primary: #1D294A;    /* Text on primary color backgrounds */
    --text-on-dark: #FFFFFF;       /* Text on dark backgrounds */
    
    /* Border Colors */
    --border-default: #E5E7EB;     /* Default borders */
    --border-focus: #E9C780;       /* Focus/active borders */
    --border-subtle: #F3F4F6;      /* Subtle dividers */
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgba(27, 41, 74, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(27, 41, 74, 0.1), 0 2px 4px -1px rgba(27, 41, 74, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(27, 41, 74, 0.1), 0 4px 6px -2px rgba(27, 41, 74, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(27, 41, 74, 0.1), 0 10px 10px -5px rgba(27, 41, 74, 0.04);
    
    /* Semantic Colors */
    --color-success: #10B981;      /* Success states, checkmarks */
    --color-success-light: #6CCB8E; /* Light success variant */
    --color-warning: #F59E0B;      /* Warning states, alerts */
    --color-error: #EF4444;        /* Error states, validation */
    --color-info: #3B82F6;         /* Info states, notices */
    
    /* Interactive States */
    --hover-overlay: rgba(0, 0, 0, 0.05);
    --active-overlay: rgba(0, 0, 0, 0.1);
    --disabled-opacity: 0.5;
    
    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #1D294A 0%, #2A3E74 50%, #35B7C8 100%);
    --gradient-primary: linear-gradient(135deg, #E9C780 0%, #35B7C8 50%, #2A3E74 100%);
    --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
}

:root.dark-mode {
    /* ===================================
       DARK MODE
       =================================== */
    
    /* Brand Colors - Stay consistent */
    --color-primary: #E9C780;
    --color-primary-dark: #C4A864;
    --color-secondary: #35B7C8;
    --color-tertiary: #4A6FA5;
    
    /* Background Colors */
    --bg-primary: #1A1F2E;         /* Main backgrounds (cards, modals, dropdowns) */
    --bg-secondary: #151B2A;       /* Subtle backgrounds (sections, hover states) */
    --bg-tertiary: #0F1419;        /* Muted backgrounds (disabled, inactive) */
    --bg-page: #0B1020;            /* Page background */
    
    /* Text Colors */
    --text-primary: #EEF2F7;       /* Main text (headings, body) */
    --text-secondary: #CBD3DC;     /* Secondary text (descriptions, labels) */
    --text-tertiary: #AFBAC6;      /* Tertiary text (hints, placeholders) */
    --text-on-primary: #111418;    /* Text on primary color backgrounds */
    --text-on-dark: #EEF2F7;       /* Text on dark backgrounds */
    
    /* Border Colors */
    --border-default: #2A3447;     /* Default borders */
    --border-focus: #E9C780;       /* Focus/active borders */
    --border-subtle: #1F2937;      /* Subtle dividers */
    
    /* Shadow Colors - Darker for depth */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    
    /* Semantic Colors - Adjusted for dark backgrounds */
    --color-success: #6CCB8E;
    --color-success-light: #10B981;
    --color-warning: #FDB813;
    --color-error: #F87171;
    --color-info: #60A5FA;
    
    /* Interactive States */
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --active-overlay: rgba(255, 255, 255, 0.1);
    --disabled-opacity: 0.4;
    
    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #0D1117 0%, #1A1F2E 50%, #2A3447 100%);
    --gradient-primary: linear-gradient(135deg, #E9C780 0%, #35B7C8 50%, #2A3447 100%);
    --gradient-card: linear-gradient(135deg, #1A1F2E 0%, #151B2A 100%);
}

/* ===================================
   LEGACY VARIABLE ALIASES
   For backward compatibility with existing code
   =================================== */

:root {
    /* Old naming convention - maps to new variables */
    --bg-white: var(--bg-primary);
    --bg-light: var(--bg-secondary);
    --bg-muted: var(--bg-tertiary);
    
    --text-dark: var(--text-primary);
    --text-light: var(--text-tertiary);
    
    --border-color: var(--border-default);
    --gray-300: #AFBAC6;
    --gray-600: #4A5568;
    
    --shadow: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    
    --primary-color: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary-color: var(--color-secondary);
    --tertiary-color: var(--color-tertiary);
    
    --success-color: var(--color-success);
    --warning-color: var(--color-warning);
    --error-color: var(--color-error);
    --info-color: var(--color-info);
    
    --night-sky: #0B1020;
    --deep-twilight: #1D294A;
}

:root.dark-mode {
    /* Legacy aliases in dark mode */
    --bg-white: var(--bg-page);
    --bg-light: var(--bg-primary);
    --bg-muted: var(--bg-secondary);
    
    --text-dark: var(--text-primary);
    --text-light: var(--text-tertiary);
    
    --border-color: var(--border-default);
    --gray-300: #4A5568;
    --gray-600: #CBD3DC;
    
    --night-sky: #EEF2F7;
    --deep-twilight: #F6F7F9;
}

/* ===================================
   2. THEME TOGGLE COMPONENT
   =================================== */

.theme-toggle {
    display: inline-block;
    margin-left: 0.75rem;
}

.theme-toggle-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.theme-toggle-button:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
    transform: translateY(-1px);
}

.theme-toggle-button:active {
    transform: translateY(0);
}

.theme-toggle-button i {
    font-size: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.theme-toggle-button:hover i {
    transform: rotate(20deg);
}

.theme-toggle-button .fa-sun {
    color: #FDB813;
}

.theme-toggle-button .fa-moon {
    color: #93C5FD;
}

.theme-label {
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Theme Toggle Responsive */
@media (max-width: 768px) {
    .theme-toggle {
        margin-left: 0.5rem;
    }
    
    .theme-toggle-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .theme-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .theme-toggle {
        margin-left: 0.25rem;
    }
    
    .theme-toggle-button {
        padding: 0.35rem 0.6rem;
    }
    
    .theme-toggle-button i {
        font-size: 0.9rem;
    }
}

/* ===================================
   3. LANGUAGE SELECTOR COMPONENT
   =================================== */

.language-selector {
    position: relative;
    display: inline-block;
}

.language-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.language-button:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-focus);
}

.language-button .fa-globe {
    color: var(--color-primary);
}

.language-button .current-language {
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.language-button .dropdown-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
    color: var(--text-secondary);
}

.language-selector:has(.language-dropdown) .dropdown-icon {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    z-index: 1000;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
    font-family: inherit;
}

.language-option:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
}

.language-option:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
}

.language-option:hover {
    background-color: var(--bg-secondary);
}

.language-option.active {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
    font-weight: 600;
}

.language-option.active:hover {
    background-color: var(--color-primary-dark);
}

.language-option .flag-icon {
    font-size: 1.25rem;
}

/* Country flag colors */
.flag-gb {
    color: #012169; /* UK Blue */
}

.flag-de {
    color: #000000; /* German Black */
}

.flag-fr {
    color: #002395; /* French Blue */
}

.flag-it {
    color: #009246; /* Italian Green */
}

.flag-es {
    color: #AA151B; /* Spanish Red */
}

/* Language Selector Responsive */
@media (max-width: 768px) {
    .language-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .language-button .current-language {
        display: none;
    }
    
    .language-dropdown {
        min-width: 180px;
    }
    
    .language-option {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .language-dropdown {
        right: -1rem;
    }
}