/* =========================================================================
   Variables CSS — palette, typo, espacements, easings
   ========================================================================= */

:root {

    /* ── Couleurs principales ─────────────────────────────────────── */
    --color-primary:       #000000;
    --color-primary-soft:  #1A1A1A;
    --color-accent:        #04adba;
    --color-accent-light:  #50c4c3;
    --color-accent-dark:   #038a96;
    --color-bg:            #FFFFFF;
    --color-bg-soft:       #F5F5F5;
    --color-bg-dark:       #000000;
    --color-text:          #000000;
    --color-text-muted:    #6B6B6B;
    --color-text-light:    #9A9A9A;
    --color-border:        #E5E5E5;
    --color-border-dark:   #CFCFCF;
    --color-white:         #FFFFFF;
    --color-overlay:       rgba(0,0,0,0.5);

    /* ── Teintes chaudes (Alsace, charme) ─────────────────────────── */
    --color-cream:         #F5EFE3;
    --color-cream-soft:    #FAF7F0;
    --color-taupe:         #B8A082;
    --color-taupe-soft:    #D4C7B0;
    --color-taupe-dark:    #8C7860;

    /* ── DPE / GES (étiquette officielle) ─────────────────────────── */
    --dpe-a: #2C9F4B;
    --dpe-b: #65B247;
    --dpe-c: #C7D742;
    --dpe-d: #F8E83F;
    --dpe-e: #F8C13F;
    --dpe-f: #F49544;
    --dpe-g: #E04E3F;

    /* ── Typographie ──────────────────────────────────────────────── */
    --font-heading:   'Cormorant Garamond', Georgia, serif;
    --font-body:      'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-signature: 'Caveat', 'Brush Script MT', cursive;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  2.5rem;
    --fs-4xl:  3rem;
    --fs-5xl:  3.5rem;
    --fs-6xl:  4.5rem;
    --fs-7xl:  6rem;

    --lh-tight: 1.05;
    --lh-snug:  1.35;
    --lh-base:  1.7;

    /* ── Rayons & ombres ──────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* Ombres légèrement teintées turquoise pour plus de chaleur visuelle */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 16px rgba(4, 173, 186, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 32px rgba(4, 173, 186, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 16px 56px rgba(4, 173, 186, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 0 1px rgba(4, 173, 186, 0.2), 0 12px 40px rgba(4, 173, 186, 0.18);

    /* ── Animations / easings ─────────────────────────────────────── */
    --transition:       0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:  0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-snap:  0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back:    cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ───────────────────────────────────────────────────── */
    --container-width:   1600px;
    --container-narrow:  860px;
    --container-padding: 0 clamp(24px, 4vw, 64px);
    --header-height:     88px;

    /* ── Z-index ──────────────────────────────────────────────────── */
    --z-base:    1;
    --z-overlay: 50;
    --z-header:  100;
    --z-drawer:  200;
    --z-modal:   300;
}