/**
 * MySkiTrip Frontend - Variables CSS
 * Variables personnalisables pour Elementor et thèmes WordPress
 *
 * @version 1.0.0
 * @package MySkiTrip
 */

:root {
    /* ===== COULEURS PRINCIPALES ===== */
    --myskitrip-primary: #FF6B35;
    --myskitrip-secondary: #F7931E;
    --myskitrip-accent: #FFB347;

    /* Couleurs de montagne */
    --myskitrip-mountain-blue: #1565C0;
    --myskitrip-mountain-light: #42A5F5;
    --myskitrip-mountain-dark: #0D47A1;

    /* Couleurs de pistes */
    --myskitrip-piste-green: #4CAF50;
    --myskitrip-piste-blue: #2196F3;
    --myskitrip-piste-red: #F44336;
    --myskitrip-piste-black: #212121;

    /* Couleurs neutres */
    --myskitrip-white: #FFFFFF;
    --myskitrip-snow: #FAFAFA;
    --myskitrip-ice-blue: #E3F2FD;
    --myskitrip-gray-light: #F5F5F5;
    --myskitrip-gray: #9E9E9E;
    --myskitrip-gray-dark: #424242;
    --myskitrip-black: #212121;

    /* ===== TYPOGRAPHIE ===== */
    --myskitrip-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --myskitrip-font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Tailles de police fluides */
    --myskitrip-text-xs: clamp(0.75rem, 1vw, 0.875rem);
    --myskitrip-text-sm: clamp(0.875rem, 1.5vw, 1rem);
    --myskitrip-text-base: clamp(1rem, 2vw, 1.125rem);
    --myskitrip-text-lg: clamp(1.125rem, 2.5vw, 1.25rem);
    --myskitrip-text-xl: clamp(1.25rem, 3vw, 1.5rem);
    --myskitrip-text-2xl: clamp(1.5rem, 4vw, 2rem);
    --myskitrip-text-3xl: clamp(2rem, 5vw, 3rem);
    --myskitrip-text-4xl: clamp(3rem, 8vw, 5rem);

    /* ===== ESPACEMENTS ===== */
    --myskitrip-space-x: clamp(0rem, 0vw, 0rem);	
    --myskitrip-space-xs: clamp(0.5rem, 0.5vw, 0.75rem);
    --myskitrip-space-sm: clamp(0.75rem, 2vw, 1rem);
    --myskitrip-space-md: clamp(1rem, 3vw, 1.5rem);
    --myskitrip-space-lg: clamp(1.5rem, 4vw, 2rem);
    --myskitrip-space-xl: clamp(2rem, 5vw, 3rem);
    --myskitrip-space-2xl: clamp(3rem, 7vw, 4rem);
    --myskitrip-space-3xl: clamp(4rem, 10vw, 6rem);

    /* ===== OMBRES ===== */
    --myskitrip-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --myskitrip-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --myskitrip-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --myskitrip-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --myskitrip-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --myskitrip-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Ombres colorées */
    --myskitrip-shadow-primary: 0 20px 40px rgba(255, 107, 53, 0.3);
    --myskitrip-shadow-blue: 0 20px 40px rgba(21, 101, 192, 0.3);

    /* ===== TRANSITIONS ===== */
    --myskitrip-transition-fast: 150ms ease-out;
    --myskitrip-transition-base: 250ms ease-out;
    --myskitrip-transition-slow: 400ms ease-out;
    --myskitrip-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== BORDURES ===== */
    --myskitrip-border-radius-sm: 6px;
    --myskitrip-border-radius: 12px;
    --myskitrip-border-radius-lg: 20px;
    --myskitrip-border-radius-xl: 24px;
    --myskitrip-border-radius-full: 50px;

    /* ===== CONTENEURS ===== */
    --myskitrip-container-sm: 640px;
    --myskitrip-container-md: 768px;
    --myskitrip-container-lg: 1024px;
    --myskitrip-container-xl: 1280px;
    --myskitrip-container-2xl: 1400px;

    /* ===== Z-INDEX ===== */
    --myskitrip-z-dropdown: 1000;
    --myskitrip-z-sticky: 1020;
    --myskitrip-z-fixed: 1030;
    --myskitrip-z-modal-backdrop: 1040;
    --myskitrip-z-modal: 1050;
    --myskitrip-z-popover: 1060;
    --myskitrip-z-tooltip: 1070;
    --myskitrip-z-toast: 1080;

    /* ===== GRADIENTS ===== */
    --myskitrip-gradient-primary: linear-gradient(135deg, var(--myskitrip-primary), var(--myskitrip-secondary));
    --myskitrip-gradient-mountain: linear-gradient(135deg, var(--myskitrip-mountain-dark), var(--myskitrip-mountain-light));
    --myskitrip-gradient-hero: linear-gradient(135deg,
        var(--myskitrip-mountain-dark) 0%,
        var(--myskitrip-mountain-blue) 30%,
        var(--myskitrip-mountain-light) 60%,
        var(--myskitrip-secondary) 90%,
        var(--myskitrip-primary) 100%);
    --myskitrip-gradient-card: linear-gradient(135deg,
        var(--myskitrip-white) 0%,
        rgba(255, 107, 53, 0.02) 50%,
        var(--myskitrip-snow) 100%);

    /* ===== BREAKPOINTS (pour référence dans JS) ===== */
    --myskitrip-bp-sm: 640px;
    --myskitrip-bp-md: 768px;
    --myskitrip-bp-lg: 1024px;
    --myskitrip-bp-xl: 1280px;
    --myskitrip-bp-2xl: 1536px;
}

/* ===== VARIABLES ELEMENTOR PERSONNALISÉES ===== */
.elementor-kit-myskitrip {
    --e-global-color-primary: var(--myskitrip-primary);
    --e-global-color-secondary: var(--myskitrip-secondary);
    --e-global-color-text: var(--myskitrip-gray-dark);
    --e-global-color-accent: var(--myskitrip-accent);

    --e-global-typography-primary-font-family: var(--myskitrip-font-heading);
    --e-global-typography-secondary-font-family: var(--myskitrip-font-body);
    --e-global-typography-text-font-family: var(--myskitrip-font-body);
    --e-global-typography-accent-font-family: var(--myskitrip-font-heading);
}

/* ===== VARIABLES POUR DARK MODE (optionnel) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --myskitrip-white: #1a1a1a;
        --myskitrip-snow: #2d2d2d;
        --myskitrip-gray-light: #3a3a3a;
        --myskitrip-gray: #8a8a8a;
        --myskitrip-gray-dark: #e0e0e0;
        --myskitrip-black: #ffffff;
    }
}

/* ===== UTILITAIRES CSS CUSTOM PROPERTIES ===== */
.myskitrip-primary-color { color: var(--myskitrip-primary) !important; }
.myskitrip-secondary-color { color: var(--myskitrip-secondary) !important; }
.myskitrip-mountain-color { color: var(--myskitrip-mountain-blue) !important; }

.myskitrip-primary-bg { background-color: var(--myskitrip-primary) !important; }
.myskitrip-secondary-bg { background-color: var(--myskitrip-secondary) !important; }
.myskitrip-mountain-bg { background-color: var(--myskitrip-mountain-blue) !important; }

.myskitrip-gradient-primary-bg { background: var(--myskitrip-gradient-primary) !important; }
.myskitrip-gradient-mountain-bg { background: var(--myskitrip-gradient-mountain) !important; }