/**
 * CSS VARIABLES GLOBALES - Le Chemin Du Prince
 * Variables partagées pour tous les sous-domaines
 */

:root {
    /* ============================================
       COULEURS PRINCIPALES
       ============================================ */
    --cream-color: #f5f2ea;
    --dark-text: #1a1a1a;
    --accent-color: #443d38;
    --light-gray: #f9f9f9;
    --medium-gray: #878787;
    --dark-gray: #333;

    /* ============================================
       COULEURS FONCTIONNELLES
       ============================================ */
    --color-success: #48BB78;
    --color-error: #ff4444;
    --color-warning: #ED8936;
    --color-info: #4299E1;

    /* ============================================
       ARRIÈRE-PLANS ET EFFETS
       ============================================ */
    /* Glass/Frost effects */
    --frost-bg: rgba(249, 249, 249, 0.55);
    --frost-bg-light: rgba(249, 249, 249, 0.75);
    --frost-bg-dark: rgba(0, 0, 0, 0.65);
    --frost-blur: blur(15px);
    --frost-blur-light: blur(6px);
    --frost-blur-heavy: blur(40px);

    /* Overlays */
    --overlay-light: rgba(0, 0, 0, 0.4);
    --overlay-dark: rgba(0, 0, 0, 0.8);

    /* Borders */
    --frost-border: rgba(26, 26, 26, 0.1);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-strong: rgba(255, 255, 255, 0.4);

    /* ============================================
       ESPACEMENTS
       ============================================ */
    --spacing-xs: 0.5rem;      /* 8px */
    --spacing-sm: 1rem;        /* 16px */
    --spacing-md: 1.5rem;      /* 24px */
    --spacing-lg: 2rem;        /* 32px */
    --spacing-xl: 2.5rem;      /* 40px */
    --spacing-2xl: 3rem;       /* 48px */
    --spacing-3xl: 4rem;       /* 64px */

    /* ============================================
       OMBRES
       ============================================ */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 20px -5px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Shadow pour header/bubbles */
    --shadow-bubble: 0 2px 10px rgba(0, 0, 0, 0.2);
    --shadow-bubble-hover: 0 4px 15px rgba(0, 0, 0, 0.15);

    /* ============================================
       RAYONS DE BORDURE
       ============================================ */
    --radius-xs: 0.25rem;      /* 4px */
    --radius-sm: 0.5rem;       /* 8px */
    --radius-md: 0.75rem;      /* 12px */
    --radius-lg: 1.5rem;       /* 24px */
    --radius-xl: 2rem;         /* 32px */
    --radius-full: 9999px;     /* Cercle complet */

    /* ============================================
       ANIMATIONS ET TRANSITIONS
       ============================================ */
    /* Timing functions */
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --transition-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --transition-custom: cubic-bezier(0.19, 1, 0.22, 1);

    /* Durées */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;
    --duration-slowest: 1000ms;

    /* Transitions complètes */
    --transition-base: all 0.3s var(--transition-smooth);
    --transition-fast: all 0.15s var(--transition-smooth);
    --transition-slow: all 0.5s var(--transition-smooth);

    /* ============================================
       TYPOGRAPHIE
       ============================================ */
    /* Font families */
    --font-primary: 'Neue Haas Grotesk', 'EuropaGroteskNo2SH-roman', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

    /* Font sizes */
    --text-xs: 0.625rem;       /* 10px */
    --text-sm: 0.75rem;        /* 12px */
    --text-base: 0.875rem;     /* 14px */
    --text-md: 1rem;           /* 16px */
    --text-lg: 1.125rem;       /* 18px */
    --text-xl: 1.25rem;        /* 20px */
    --text-2xl: 1.5rem;        /* 24px */
    --text-3xl: 2rem;          /* 32px */
    --text-4xl: 2.5rem;        /* 40px */
    --text-5xl: 3rem;          /* 48px */

    /* Font weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ============================================
       Z-INDEX LAYERS
       ============================================ */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-notification: 80;
    --z-max: 9999;

    /* ============================================
       BREAKPOINTS (for reference in JS)
       ============================================ */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ============================================
       DIMENSIONS SPÉCIFIQUES
       ============================================ */
    /* Header bubbles */
    --bubble-height: 3.35rem;
    --bubble-left-width: 5rem;
    --bubble-right-width: 11rem;
    --bubble-center-width: 17rem;
    --header-padding: 1rem;
    --bubble-gap: 2rem;
    --icon-gap: 1.5rem;

    /* Container widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-max: 1600px;
}

/* ============================================
   MEDIA QUERIES - Responsive Variables
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --bubble-left-width: 5rem;
        --bubble-right-width: 9rem;
        --bubble-center-width: 15rem;
        --header-padding: 1.25rem;
        --bubble-gap: 1rem;
        --icon-gap: 1rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --bubble-height: 3.35rem;
        --bubble-left-width: 4.5rem;
        --bubble-right-width: 6rem;
        --bubble-center-width: 13rem;
        --header-padding: 0.75rem;
        --bubble-gap: 1rem;
        --icon-gap: 0.75rem;

        /* Adjust text sizes for mobile */
        --text-3xl: 1.75rem;
        --text-4xl: 2rem;
        --text-5xl: 2.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    :root {
        --bubble-height: 3rem;
        --bubble-left-width: 4rem;
        --bubble-right-width: 4rem;
        --bubble-center-width: 11rem;
        --header-padding: 0.5rem;
        --bubble-gap: 0.75rem;
        --icon-gap: 0.5rem;
    }
}

/* ============================================
   DARK MODE (optional - for accessibility)
   ============================================ */
[data-theme="dark"] {
    --cream-color: #1a1a1a;
    --dark-text: #f5f2ea;
    --light-gray: #2a2a2a;
    --medium-gray: #a8a8a8;
    --dark-gray: #e5e5e5;
}