/**
 * ZAIRIDES - CSS Custom Properties (Variables)
 * Utilisé par tous les composants du site
 */

:root {
    /* ===== PALETTE DE COULEURS ===== */

    /* Rouge - Couleur principale */
    --color-red-darkest: #7f1d1d;
    --color-red-dark: #991b1b;
    --color-red-primary: #b91c1c;
    --color-red-mid: #dc2626;
    --color-red-light: #ef4444;
    --color-red-lighter: #f87171;

    /* Perle - Couleurs neutres */
    --color-pearl-dark: #d4d4d8;
    --color-pearl-mid: #e4e4e7;
    --color-pearl-light: #f4f4f5;
    --color-pearl-white: #fafafa;

    /* Texte - Light mode */
    --color-text-primary: #18181b;
    --color-text-secondary: #71717a;
    --color-text-light: #a1a1aa;

    /* Backgrounds - Light mode */
    --color-bg-primary: #fafafa;
    --color-bg-secondary: #f4f4f5;
    --color-bg-card: #ffffff;

    /* ===== COMPOSANT: MOBILE MENU ===== */
    --mobile-menu-bg: var(--color-pearl-white);
    --mobile-menu-text: var(--color-text-primary);
    --mobile-menu-hamburger: var(--color-red-primary);
    --mobile-menu-link-hover: var(--color-red-primary);
    --mobile-menu-overlay-z: 1002;
    --mobile-menu-btn-z: 1003;

    /* ===== NAVIGATION ===== */
    --nav-height: 7.0625rem; /* 113px */
    --nav-z-index: 1000;
    --nav-bg-light: rgba(255, 255, 255, 0.95);
    --nav-bg-dark: rgba(10, 10, 10, 0.95);

    /* ===== SPACING SCALE ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */

    /* Section padding */
    --section-padding: 4rem 2rem;
    --section-padding-desktop: 6rem 2rem;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s ease;

    /* ===== BREAKPOINTS (pour référence JS) ===== */
    --breakpoint-mobile: 968px;

    /* ===== BORDERS & RADIUS ===== */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
}

/* ===== DARK MODE OVERRIDES ===== */
[data-theme="dark"],
body.dark-mode {
    /* Texte - Dark mode */
    --color-text-primary: #fafafa;
    --color-text-secondary: #a1a1aa;
    --color-text-light: #71717a;

    /* Backgrounds - Dark mode */
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #18181b;
    --color-bg-card: #27272a;

    /* Mobile Menu - Dark mode */
    --mobile-menu-bg: #0a0a0a;
    --mobile-menu-text: var(--color-pearl-white);
    --mobile-menu-hamburger: var(--color-red-light); /* Contraste corrigé #ef4444 */
    --mobile-menu-link-hover: var(--color-red-light);
}