/* CSS Variables - budou dynamicky přepsány z konfigurace */
:root {
    /* Barvy */
    --color-primary: #E31E24;
    --color-primary-dark: #B71820;
    --color-secondary: #2C2C2C;
    --color-accent: #F5F5F5;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-background: #FFFFFF;
    --color-background-gray: #F8F8F8;

    /* Typografie */
    --font-family: Arial, Helvetica, sans-serif;
    --font-heading: Arial, Helvetica, sans-serif;
    --font-size-base: 16px;
    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 28px;
    --font-size-h4: 24px;
    --font-size-small: 14px;

    /* Rozestupy */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;

    /* Šířky */
    --container-width: 1200px;
    --container-padding: 20px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index */
    --z-dropdown: 100;
    --z-header: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    :root {
        --font-size-h1: 36px;
        --font-size-h2: 28px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
        --container-padding: 16px;
        --spacing-xl: 32px;
        --spacing-xxl: 48px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;
        --container-padding: 12px;
    }
}