/* ===========================================================
   L'ÉCRIN DES NYMPHES - Variables CSS
   Toute la charte graphique du site est centralisée ici.
   =========================================================== */

:root {

  /* === COULEURS PRINCIPALES · Palette "Riviera bord de mer" === */
  --color-forest:        #1B3A52;  /* Bleu marine profond (navy) */
  --color-forest-dark:   #0F2638;  /* Bleu nuit (hover/dark) */
  --color-forest-light:  #3D7290;  /* Bleu pétrole / mer */
  --color-terracotta:    #E89378;  /* Corail chaleureux */
  --color-terracotta-dark: #C9755D;/* Corail foncé */
  --color-terracotta-light: #F4B7A0;/* Corail pâle */
  --color-sand:          #F8F4EA;  /* Crème sable - fond page */
  --color-sand-warm:     #EFE7D2;  /* Sable doré pâle */
  --color-cream:         #FFFEF7;  /* Crème lumineuse - surfaces */
  --color-water:         #3D7290;  /* Bleu mer (texte secondaire) */
  --color-ivory:         #D9AB6B;  /* Doré soleil (accents premium) */
  --color-white:         #FFFFFF;
  --color-black:         #1A1A1A;

  /* === COULEURS SÉMANTIQUES === */
  --bg-page:             var(--color-sand);
  --bg-surface:          var(--color-white);
  --bg-surface-alt:      var(--color-sand-warm);
  --bg-surface-warm:     var(--color-cream);
  --bg-dark:             var(--color-forest);

  --text-primary:        var(--color-forest);
  --text-secondary:      var(--color-water);
  --text-muted:          #7896AB;
  --text-on-dark:        var(--color-sand);
  --text-accent:         var(--color-terracotta);

  --border-light:        rgba(27, 58, 82, 0.06);
  --border-medium:       rgba(27, 58, 82, 0.12);
  --border-strong:       rgba(27, 58, 82, 0.20);

  /* === TYPOGRAPHIE === */
  --font-display:        'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.5rem;
  --fs-xl:    2rem;
  --fs-2xl:   3rem;
  --fs-3xl:   4.5rem;

  --lh-tight:   1.2;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  --letter-tight:    -0.02em;
  --letter-normal:   0;
  --letter-wide:     0.05em;
  --letter-widest:   0.2em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     600;

  /* === ESPACEMENTS === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* === LAYOUT === */
  --container-sm:   640px;
  --container-md:   960px;
  --container-lg:   1200px;
  --container-xl:   1400px;

  --header-height:  84px;

  /* === RADIUS (arrondis généreux & modernes) === */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-3xl:   40px;
  --radius-pill:  999px;

  /* === OMBRES === */
  --shadow-xs:  0 1px 2px rgba(27, 58, 82, 0.04);
  --shadow-sm:  0 2px 8px rgba(27, 58, 82, 0.06);
  --shadow-md:  0 8px 24px rgba(27, 58, 82, 0.08);
  --shadow-lg:  0 16px 48px rgba(27, 58, 82, 0.12);
  --shadow-xl:  0 24px 64px rgba(27, 58, 82, 0.16);
  --shadow-glow: 0 0 0 4px rgba(232, 147, 120, 0.12);

  /* === TRANSITIONS === */
  --transition-fast:    150ms ease;
  --transition-default: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth:  500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:    800ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === Z-INDEX === */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-header:     500;
  --z-overlay:    900;
  --z-modal:      1000;
}

@media (max-width: 768px) {
  :root {
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.75rem;
    --fs-xl:  1.5rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --header-height: 72px;
  }
}