/**
 * CSS Variables
 * 
 * @package Kurpfalz_Theme
 * @author Saad Badr
 * @copyright 2025 SawatzkiMühlenbruch GmbH
 */

:root {
    /* Colors */
    --color-primary: #2c104c;
    --color-secondary: #d5d4e5;
    --color-tertiary: #f5e2cc;
    --color-quaternary: rgba(245, 226, 204, 0.2);
    --color-white: #ffffff;
    --color-black: #000000;
    --color-shadow: #888888;
    --color-border: #d5d4e5;
    --color-text-secondary: #666666;
    --color-background-card: #ffffff; /* Card backgrounds */
    --color-text-primary: #2c104c; /* Primary text color */
    --color-secondary-hover: rgba(213, 212, 229, 0.8); /* Secondary color hover state */

    /* Centerplan specific colors */
    --color-background-light: #f8f9fa; /* Light gray background */
    --color-border-light: #e5e7eb; /* Light border color */
    --color-text-muted: #6b7280; /* Muted text color */
    --color-warning-bg: #fff3cd; /* Warning background */
    --color-warning-border: #ffc107; /* Warning border */
    --color-warning-text: #856404; /* Warning text */
    
    /* Typography */
    --font-family-base: "DIN Next LT Pro", sans-serif;
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-size-base: 16px;
    --font-size-h1: 2.2rem;
    --font-size-h2: 1.6rem;
    --font-size-h3: 1.5rem;
    --font-size-large: 1.4rem;
    --font-size-medium: 1.25rem;
    --font-size-small: 0.9rem;
    --font-size-intro-h2: 1.8rem; /* Intro-specific override */
    --font-size-contact-h3: 1.2rem; /* Contact Info h3 */
    
    /* Spacing */
    --spacing-xxs: 4px;
    --spacing-xs: 10px;
    --spacing-sm: 20px;
    --spacing-md: 30px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;

    /* Component-specific spacing */
    --spacing-button-padding-x: 25px;
    --spacing-button-small-padding: 5px 15px;
    --spacing-button-large-padding: 15px 35px;
    --spacing-card-gap: 20px;
    --spacing-highlight-gap: 20px;
    --spacing-shop-single-gap: 40px;
    
    /* Layout */
    --max-width-content: 1350px;
    --max-width-form: 750px;
    --max-width-text: 700px;
    --max-width-card: 403px;
    --max-width-shop-cover: 400px;
    --margin-horizontal: 40px;

    /* Component-specific sizes */
    --size-service-card: 200px;
    --size-shop-logo: 200px;
    --size-shop-cover-width: 350px;
    --size-shop-cover-height: 200px;
    --size-carousel-height: 140px;
    --size-carousel-logo-height: 70px;
    
    /* Border Radius */
    --border-radius-xxs: 4px;
    --border-radius-xs: 8px;
    --border-radius-sm: 10px;
    --border-radius-md: 20px;
    --border-radius-highlight: 15px;
    --border-radius-lg: 36px;

    /* Transitions */
    --transition-fast: 400ms;
    --transition-medium: 800ms;
    --transition-slow: 1.5s;

    /* Box Shadows */
    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 12px rgba(44, 16, 76, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Centerplan specific */
    --centerplan-map-height: 600px;
    --centerplan-tooltip-max-width: 320px;
    --centerplan-loading-bg: rgba(255, 255, 255, 0.95);
    
    /* Z-Index */
    --z-index-header: 101;
    --z-index-burger-menu: 100;
    --z-index-dropdown: 1;
    
    /* Header */
    --header-height: 80px;
    --header-height-mobile: 50px;
    --logo-height: 100px; /* Logo ragt 20px aus Header heraus */

    /* Widget Spacing - Adjusted for logo overlap */
    --widget-margin-top: 120px; /* 100px logo + 20px clearance */

    /* Breakpoints (for reference in media queries) */
    --breakpoint-xl: 1270px;
    --breakpoint-lg: 1100px;
    --breakpoint-md: 850px;
    --breakpoint-sm: 750px;
    --breakpoint-xs: 540px;
}

/* ==========================================================================
   Responsive Variable Adjustments
   ========================================================================== */

/* Medium screens - Logo might overlap */
@media (max-width: 1100px) {
    :root {
        --widget-margin-top: 140px; /* More clearance for smaller screens */
    }
}

@media (max-width: 750px) {
    :root {
        --margin-horizontal: 20px; /* Reduziert auf mobil */
        --widget-margin-top: 120px; /* Logo still ~100px on tablet */
    }
}

@media (max-width: 540px) {
    :root {
        --margin-horizontal: 20px; /* Bleibt bei 20px */
        /* Logo: width = calc(85% - 50px), aspect-ratio 306/100
           At 375px viewport: width ~269px, height ~88px
           Header is 50px, logo extends ~38px below
           Need: 88px logo + 20px clearance = 108px minimum */
        --widget-margin-top: 110px; /* Logo ~88px + clearance */
    }
}