/* ═══════════════════════════════════════════════════════════
   El Couzina — Design System (Variables)
   Moderne, chaleureux, commercial
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Brand Colors (Bleu · Doré · Blanc) ───────────── */
    --primary: #1B4965;          /* Bleu nuit profond — principal */
    --primary-light: #3E6B8A;
    --primary-dark: #0F2C44;
    --primary-rgb: 27, 73, 101;

    --secondary: #D4A337;        /* Doré — signature */
    --secondary-light: #E8C36A;
    --secondary-dark: #B0862A;

    --accent: #F4C95D;           /* Doré clair — accents vifs */
    --accent-light: #FADE8C;
    --accent-dark: #D4A337;

    /* ─── Backgrounds ──────────────────────────────────── */
    --bg: #FFFFFF;                /* Blanc pur */
    --bg-alt: #F7F9FC;            /* Blanc cassé bleuté */
    --bg-card: #FFFFFF;
    --bg-dark: #0F2C44;           /* Bleu nuit profond */
    --bg-overlay: rgba(15, 44, 68, 0.55);

    /* ─── Text ─────────────────────────────────────────── */
    --text: #1A2B3D;              /* Navy foncé */
    --text-secondary: #3E5268;
    --text-muted: #7A8799;
    --text-on-dark: #FFFFFF;
    --text-on-primary: #FFFFFF;

    /* ─── Borders / Shadows ────────────────────────────── */
    --border: rgba(27, 73, 101, 0.08);
    --border-strong: rgba(27, 73, 101, 0.2);

    --shadow-xs: 0 1px 2px rgba(15, 44, 68, 0.04);
    --shadow-sm: 0 2px 4px rgba(15, 44, 68, 0.06);
    --shadow: 0 4px 16px rgba(15, 44, 68, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 44, 68, 0.12);
    --shadow-lg: 0 16px 48px rgba(15, 44, 68, 0.16);
    --shadow-xl: 0 24px 64px rgba(15, 44, 68, 0.2);

    /* ─── Typography ───────────────────────────────────── */
    --font-display: 'Cormorant Garamond', Georgia, serif;  /* Titres élégants */
    --font-heading: 'Playfair Display', Georgia, serif;    /* Headings secondaires */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Dancing Script', cursive;              /* Touches décoratives */

    /* Font sizes (fluid with clamp) */
    --text-xs: 0.75rem;        /* 12px */
    --text-sm: 0.875rem;       /* 14px */
    --text-base: 1rem;         /* 16px */
    --text-lg: 1.125rem;       /* 18px */
    --text-xl: 1.25rem;        /* 20px */
    --text-2xl: 1.5rem;        /* 24px */
    --text-3xl: clamp(1.75rem, 3vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 4vw, 3rem);
    --text-5xl: clamp(2.75rem, 5vw, 4rem);
    --text-6xl: clamp(3.5rem, 7vw, 5.5rem);

    /* Line heights */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    --leading-loose: 1.9;

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

    /* ─── Spacing (8px base) ───────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ─── Layout ───────────────────────────────────────── */
    --container-xs: 640px;
    --container-sm: 768px;
    --container-md: 1024px;
    --container-lg: 1200px;
    --container-xl: 1400px;
    --container-2xl: 1600px;

    --header-height: 80px;
    --header-height-mobile: 64px;

    /* ─── Radius ───────────────────────────────────────── */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* ─── Transitions ──────────────────────────────────── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 0.15s;
    --duration: 0.25s;
    --duration-slow: 0.4s;
    --duration-slower: 0.6s;

    --transition-colors: color var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
    --transition-transform: transform var(--duration) var(--ease);
    --transition-all: all var(--duration) var(--ease);

    /* ─── Z-index scale ─────────────────────────────────── */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 500;
    --z-dropdown: 600;
    --z-bottom-nav: 700;
    --z-fab: 710;
    --z-overlay: 900;
    --z-sheet: 950;
    --z-progress: 980;
    --z-modal: 1000;
    --z-toast: 9999;

    /* ─── Mobile shell ─────────────────────────────────── */
    --bottom-nav-height: 68px;
    --fab-size: 56px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --mobile-gutter: 16px;

    /* ─── Glass tokens ─────────────────────────────────── */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-dark: rgba(15, 44, 68, 0.72);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-blur: 18px;

    /* ─── Header tokens (cohérent palette bleu/blanc) ─── */
    --header-bg: rgba(255, 255, 255, 0.82);
    --header-bg-scrolled: rgba(255, 255, 255, 0.97);
    --header-border-scrolled: rgba(27, 73, 101, 0.08);

    /* ─── Extra easings ────────────────────────────────── */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --ease-elastic: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.4%, 1.12 20.3%, 1.143 24.7%, 1.096 32.6%, 1.018 39.6%, 0.99 42.4%, 0.96 47%, 0.985 55.2%, 1.003 59.2%, 1.014 63%, 1.02, 0.999 80%, 1);

    /* ─── Float shadows ────────────────────────────────── */
    --shadow-float: 0 10px 30px rgba(15, 44, 68, 0.18), 0 3px 8px rgba(15, 44, 68, 0.1);
    --shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ─── Dark Mode ───────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg: #0B1A28;
    --bg-alt: #0F2537;
    --bg-card: #142F45;
    --bg-dark: #0B1523;

    --text: #EAF2FA;
    --text-secondary: rgba(234, 242, 250, 0.78);
    --text-muted: rgba(234, 242, 250, 0.55);

    --border: rgba(234, 242, 250, 0.08);
    --border-strong: rgba(234, 242, 250, 0.18);

    --glass-bg: rgba(15, 37, 55, 0.72);
    --glass-border: rgba(234, 242, 250, 0.1);

    --header-bg: rgba(11, 26, 40, 0.82);
    --header-bg-scrolled: rgba(11, 26, 40, 0.97);
    --header-border-scrolled: rgba(234, 242, 250, 0.1);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Auto dark mode (only if user hasn't chosen explicitly) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0B1A28;
        --bg-alt: #0F2537;
        --bg-card: #142F45;
        --bg-dark: #0B1523;
        --text: #EAF2FA;
        --text-secondary: rgba(234, 242, 250, 0.78);
        --text-muted: rgba(234, 242, 250, 0.55);
        --border: rgba(234, 242, 250, 0.08);
        --border-strong: rgba(234, 242, 250, 0.18);
        --glass-bg: rgba(15, 37, 55, 0.72);
        --glass-border: rgba(234, 242, 250, 0.1);
    }
}

/* Dark sections override (when using .section-dark) */
.section-dark {
    --text: var(--text-on-dark);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);
    --bg-card: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.12);
}