/**
 * Oh Baby Spa - Variables CSS
 * Design aligné sur le nouveau site ohbabyspa.be
 * Couleurs : Bleu marine profond + Jaune/Or
 * (Les noms de variables historiques --primary-teal* sont conservés pour
 *  compatibilité, mais portent désormais les valeurs « bleu marine ».)
 * @version 7.0.0
 */

:root {
    /* Couleurs principales - Bleu marine (nouvelle identité) */
    --primary-teal: #103A54;
    --primary-teal-light: #1C5878;
    --primary-teal-dark: #0C2E43;
    --primary-teal-darker: #081F2E;

    /* Accent Jaune/Or */
    --accent-gold: #F4C24C;
    --accent-gold-light: #F8D480;
    --accent-gold-dark: #D9A52F;

    /* Couleurs neutres (tons frais clairs) */
    --white: #FFFFFF;
    --cream: #F2F5F8;
    --beige: #E8EEF2;
    --beige-dark: #D5DEE4;

    /* Aliases pour compatibilité */
    --primary-blue: var(--primary-teal);
    --primary-green: var(--primary-teal-light);
    --light-blue: var(--cream);
    --light-green: var(--beige);

    /* Couleurs de texte */
    --dark-text: #16304A;
    --medium-text: #3F525F;
    --light-text: #6B7C88;
    --white-text: #FFFFFF;
    --gold-text: var(--accent-gold);

    /* Couleurs d'état */
    --error-red: #E53E3E;
    --success-green: #38A169;
    --warning-yellow: var(--accent-gold);
    --info-blue: var(--primary-teal-light);

    /* Arrière-plans */
    --background: var(--cream);
    --background-alt: var(--beige);
    --card-background: var(--white);
    --overlay-dark: rgba(12, 46, 67, 0.85);

    /* Ombres (teinte marine) */
    --card-shadow: 0 4px 20px rgba(16, 58, 84, 0.12);
    --shadow-sm: 0 2px 8px rgba(16, 58, 84, 0.08);
    --shadow-md: 0 6px 25px rgba(16, 58, 84, 0.15);
    --shadow-lg: 0 10px 40px rgba(16, 58, 84, 0.20);
    --shadow-gold: 0 4px 15px rgba(244, 194, 76, 0.35);

    /* Bordures */
    --border-color: var(--beige-dark);
    --border-light: var(--beige);
    --border-gold: var(--accent-gold);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-xxl: 32px;
    --border-radius-round: 50%;

    /* Espacements */
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Typographie */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Playfair Display', 'Georgia', serif;
    --font-family-script: 'Dancing Script', 'Pacifico', cursive;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-xxl: 28px;
    --font-size-xxxl: 36px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Transitions */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.25s ease-out;
    --transition-slow: 0.4s ease-out;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Gradients */
    --gradient-teal: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-light) 100%);
    --gradient-header: linear-gradient(135deg, var(--primary-teal-dark) 0%, var(--primary-teal) 55%, var(--primary-teal-light) 100%);
    --gradient-gold: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-light) 100%);
    --gradient-card: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);

    /* Aliases pour compatibilité avec anciens styles */
    --gradient-primary: var(--gradient-teal);
    --gradient-button: var(--gradient-gold);

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 400;
    --z-modal: 500;
    --z-menu: 600;
    --z-toast: 1000;
}