/**
 * CSS Variables System
 * 
 * This file defines all CSS custom properties (variables) used throughout the application.
 * Variables are organized into logical sections for maintainability.
 * 
 * Sections:
 * - Color Palette: Primary colors, backgrounds, text colors
 * - Category Colors: Event category-specific colors
 * - Spacing: Margin and padding values
 * - Borders: Border radius and width values
 * - Typography: Font sizes
 * - Transitions: Animation timing
 * - Dark Mode: Theme overrides for dark mode
 */

/* === Light Mode Colors (Default) === */
:root {
    /* === Color Palette === */
    --primary-bg: #FFFFFF;
    /* Pure white background for main areas */
    --secondary-bg: #F5F5F5;
    /* Light gray for secondary backgrounds */
    --card-bg: #FFFFFF;
    /* White, used for cards and surfaces */
    --accent-color: #AED9E0;
    /* Pastel Blue accent for highlights and buttons */
    --accent-hover: #9AC8D3;
    /* Slightly darker blue for hover states */
    --text-dark: #000000;
    /* Black for primary text (headers) for consistency with borders */
    --text-dark-hover: #333333;
    /* Dark gray for hover states on black buttons */
    --text-light: #000000;
    /* Black for secondary text */
    --border-light: #EAEAEA;
    /* Light Gray for borders and dividers */
    --logo-header-bg: #FFFFFF;
    /* White background for logo/header area */
    --nav-bg: #000000;
    /* Black background for navigation */
    --nav-text: #FFFFFF;
    /* White text for navigation */
    --footer-bg: #000000;
    /* Black background for footer */
    --footer-text: #FFFFFF;
    /* White text for footer */
    --white: #FFFFFF;
    /* Pure white, for utility use */

    /* === Legacy & Alias Variables === */
    --primary-dark: var(--text-dark);
    /* Alias for dark text */

    /* === Category Colors (Light Mode) === */
    --category-konzerte: #FF6B6B;
    /* Coral Red */
    --category-party: #FFD166;
    /* Sunny Yellow */
    --category-theater: #06D6A0;
    /* Emerald Green */
    --category-festival: #118AB2;
    /* Pacific Blue */
    --category-vortrag: #E07A5F;
    /* Terracotta */
    --category-markt: #3D405B;
    /* Indigo Dye */
    --category-kinder: #81B29A;
    /* Cambridge Blue */
    --category-jugendliche: #9B59B6;
    /* Purple for Youth/Teens */
    --category-essen: #F2CC8F;
    /* Buff (for Essen & Trinken) */
    --category-sport: #F4A261;
    /* Sandy Brown */
    --category-kunst: #9A8C98;
    /* Mountbatten Pink */
    --category-fuehrung: #72A1E5;
    /* Cornflower Blue */
    --category-workshop: #5EAAA8;
    /* Ocean Green */
    --category-social: #F08A5D;
    /* Cantaloupe (for Social/Community) */
    --category-flohmarkt: #B58DB6;
    /* Lilac */
    --category-comedy: #457B9D;
    /* Celestial Blue */
    --category-kino: #BC4749;
    /* Redwood */
    --category-show: #E91E63;
    /* Pink/Magenta for Shows */
    --category-sonstiges: #A8A8A8;
    /* Grey for Other */

    /* === Spacing === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* === Borders === */
    --border-radius-sm: 5px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-round: 25px;
    --border-width-thin: 1px;
    --border-width-thick: 4px;

    /* === Typography === */
    --font-size-xs: 0.8em;
    --font-size-sm: 0.9em;
    --font-size-md: 1em;
    --font-size-lg: 1.1em;
    --font-size-xl: 1.2em;

    /* === Transitions === */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* === Dark Mode === */
[data-theme="dark"] {
    /* === Color Palette (Dark Mode) === */
    --primary-bg: #000000;
    /* Black background for main areas */
    --secondary-bg: #1a1a1a;
    /* Slightly lighter black for secondary backgrounds */
    --card-bg: #1a1a1a;
    /* Dark gray for cards and surfaces */
    --accent-color: #4a9eff;
    /* Bright blue accent for highlights and buttons */
    --accent-hover: #357abd;
    /* Slightly darker blue for hover states */
    --text-dark: #ffffff;
    /* White for primary text */
    --text-light: #ffffff;
    /* White for secondary text */
    --border-light: #333333;
    /* Dark gray for borders and dividers */
    --logo-header-bg: #000000;
    /* Black background for logo/header area */
    --nav-bg: #000000;
    /* Black background for navigation */
    --nav-text: #FFFFFF;
    /* White text for navigation */
    --footer-bg: #000000;
    /* Black background for footer */
    --footer-text: #FFFFFF;
    /* White text for footer */
    --white: #1a1a1a;
    /* Dark gray for utility use */

    /* === Category Colors (Dark Mode) === */
    --category-konzerte: #FF6B6B;
    /* Coral Red */
    --category-party: #FFD166;
    /* Sunny Yellow */
    --category-theater: #06D6A0;
    /* Emerald Green */
    --category-festival: #118AB2;
    /* Pacific Blue */
    --category-vortrag: #E07A5F;
    /* Terracotta */
    --category-markt: #3D405B;
    /* Indigo Dye */
    --category-kinder: #81B29A;
    /* Cambridge Blue */
    --category-jugendliche: #9B59B6;
    /* Purple for Youth/Teens */
    --category-essen: #F2CC8F;
    /* Buff */
    --category-sport: #F4A261;
    /* Sandy Brown */
    --category-kunst: #9A8C98;
    /* Mountbatten Pink */
    --category-fuehrung: #72A1E5;
    /* Cornflower Blue */
    --category-workshop: #5EAAA8;
    /* Ocean Green */
    --category-social: #F08A5D;
    /* Cantaloupe */
    --category-flohmarkt: #B58DB6;
    /* Lilac */
    --category-comedy: #457B9D;
    /* Celestial Blue */
    --category-kino: #BC4749;
    /* Redwood */
    --category-show: #E91E63;
    /* Pink/Magenta for Shows */
    --category-sonstiges: #808080;
    /* Darker Grey for Other */
}

/* === System Preference Detection === */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* === Color Palette (System Dark Mode) === */
        --primary-bg: #000000;
        --secondary-bg: #1a1a1a;
        --card-bg: #1a1a1a;
        --accent-color: #4a9eff;
        --accent-hover: #357abd;
        --text-dark: #ffffff;
        --text-light: #ffffff;
        --border-light: #333333;
        --logo-header-bg: #000000;
        --nav-bg: #000000;
        --nav-text: #FFFFFF;
        --footer-bg: #000000;
        --footer-text: #FFFFFF;
        --white: #1a1a1a;

        /* === Category Colors (System Dark Mode) === */
        --category-konzerte: #FF6B6B;
        --category-party: #FFD166;
        --category-theater: #06D6A0;
        --category-festival: #118AB2;
        --category-vortrag: #E07A5F;
        --category-markt: #3D405B;
        --category-kinder: #81B29A;
        --category-jugendliche: #9B59B6;
        --category-essen: #F2CC8F;
        --category-sport: #F4A261;
        --category-kunst: #9A8C98;
        --category-fuehrung: #72A1E5;
        --category-workshop: #5EAAA8;
        --category-social: #F08A5D;
        --category-flohmarkt: #B58DB6;
        --category-comedy: #457B9D;
        --category-kino: #BC4749;
        --category-show: #E91E63;
        --category-sonstiges: #808080;
    }
}