/* =========================================================================
   VARIABLES CSS — CHARTE GRAPHIQUE LE NOUVEAU PARIS
   -------------------------------------------------------------------------
   👉 Modifiez les valeurs ici pour changer la charte globale du site.
   ========================================================================= */

:root {

  /* ---------- COULEURS ---------- */
  --color-noir:           #0a0a0a;   /* Noir profond — fond principal */
  --color-noir-soft:      #141414;   /* Noir adouci — sections alternées */
  --color-noir-elevated:  #1a1a1a;   /* Noir surélevé — cartes */

  --color-or:             #c9a961;   /* Doré signature */
  --color-or-clair:       #d9bd7a;   /* Doré clair — hover */
  --color-or-fonce:       #a88a47;   /* Doré profond — accents */

  --color-beige:          #d4c5a0;   /* Beige élégant */
  --color-beige-clair:    #e8dec3;   /* Beige clair */

  --color-blanc:          #f5f1e8;   /* Blanc cassé — texte principal */
  --color-blanc-doux:     #ebe6d8;   /* Blanc doux */
  --color-gris:           #8a857a;   /* Gris — texte secondaire */
  --color-gris-fonce:     #4a4640;   /* Gris foncé — bordures */

  --color-overlay:        rgba(10, 10, 10, 0.72);     /* Overlay sombre */
  --color-overlay-light:  rgba(10, 10, 10, 0.45);
  --color-overlay-gold:   rgba(201, 169, 97, 0.08);   /* Reflet doré subtil */

  --color-creme:          #f5ecd0;   /* Crème chaud — titres section nouveauté */
  --color-gris-clair:     #b8b2a8;   /* Gris clair — descriptions secondaires */


  /* ---------- TYPOGRAPHIE ---------- */
  --font-serif:    'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-heading:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script:   'Cormorant Garamond', Georgia, serif;  /* italique pour accents */

  /* Tailles fluides (clamp = mobile / desktop) */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-sm:    clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
  --text-base:  clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  --text-lg:    clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
  --text-xl:    clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --text-2xl:   clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --text-3xl:   clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --text-4xl:   clamp(3rem, 2.4rem + 3.5vw, 5.5rem);
  --text-hero:  clamp(3rem, 2rem + 6vw, 7rem);

  /* Espacement entre lettres */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.3em;

  /* Hauteurs de ligne */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;


  /* ---------- ESPACEMENTS ---------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* Padding des sections (fluide) */
  --section-padding-y: clamp(4rem, 3rem + 5vw, 8rem);
  --section-padding-x: clamp(1.25rem, 0.5rem + 3vw, 3rem);


  /* ---------- LARGEURS / CONTAINERS ---------- */
  --container-max:   1320px;
  --container-text:  680px;
  --container-wide:  1480px;


  /* ---------- BORDURES & RAYONS ---------- */
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-xl:    16px;

  --border-thin:  1px solid var(--color-gris-fonce);
  --border-gold:  1px solid var(--color-or);


  /* ---------- OMBRES ---------- */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 20px 50px rgba(0, 0, 0, 0.4);
  --shadow-gold:  0 8px 32px rgba(201, 169, 97, 0.15);


  /* ---------- TRANSITIONS ---------- */
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:    180ms;
  --duration-normal:  320ms;
  --duration-slow:    600ms;
  --duration-slower:  900ms;

  --transition-default: all var(--duration-normal) var(--ease-smooth);
  --transition-color:   color var(--duration-normal) var(--ease-smooth),
                        background-color var(--duration-normal) var(--ease-smooth),
                        border-color var(--duration-normal) var(--ease-smooth);


  /* ---------- Z-INDEX ---------- */
  --z-base:      1;
  --z-content:   10;
  --z-overlay:   50;
  --z-header:    100;
  --z-sticky:    200;
  --z-modal:     500;
  --z-toast:     1000;
}