/* tokens.css — variables CSS globales, cf. docs/design-tokens.md (ne pas coder de valeur en dur ailleurs) */

:root {
  /* ===== Couleurs (cf. brand.md §1) ===== */
  --color-white:        #FFFFFF;
  --color-cream:        #FBF9F5; /* fond principal */
  --color-beige:        #EFE6DA; /* fond secondaire / cartes */
  --color-gold:         #B08D57; /* accent / logo / icônes */
  --color-gold-light:   #C9A876; /* hover sur fond clair */
  --color-gold-dark:    #8F6F42; /* état actif/pressed */
  --color-black:        #161513; /* texte fort / CTA principal / sections sombres */
  --color-charcoal:     #3A3733; /* texte courant */
  --color-border:       #E4D9C9; /* bordures fines, séparateurs */
  --color-border-gold:  rgba(176, 141, 87, 0.35); /* liseré doré fin (cartes/citations), derive de --color-gold */

  /* Aucun dégradé "or métallique" : la marque utilise l'or en aplat uni (retour client).
     Les seuls dégradés or restants sont les fins filets décoratifs (transparent → or →
     transparent) des séparateurs, qui ne sont pas un effet métallique. */

  /* Couleurs fonctionnelles minimales (non définies dans brand.md, teintes discrètes
     choisies pour rester dans l'esprit de la palette — à ajuster visuellement si besoin) */
  --color-error:        #A3402F;
  --color-success:      #4B7F52;

  /* ===== Typographie (cf. brand.md §2) ===== */
  /* Cormorant Garamond pour les titres (contraste plus marque avec le corps de texte, retour
     design). Le logo est desormais le fichier officiel (image, cf. _logo.php) - plus de police
     dediee au logo. */
  --font-family-heading: 'Cormorant Garamond', Georgia, serif;
  --font-family-body:    'Inter', -apple-system, Segoe UI, sans-serif;

  --font-size-h1:       clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);  /* ~28px mobile → 44px desktop */
  --font-size-h2:       clamp(1.5rem, 1.3rem + 1vw, 2.25rem);      /* ~24px → 36px */
  --font-size-h3:       clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);   /* ~20px → 24px */
  --font-size-body:     1rem;      /* 16px — ne jamais descendre en dessous (accessibilité) */
  --font-size-small:    0.875rem;  /* 14px — mentions, légendes, FAQ secondaire */
  --font-size-overline: 0.8125rem; /* 13px — sur-titres et nav en capitales espacées */

  --line-height-heading: 1.2;
  --line-height-body:    1.6;
  --line-height-small:   1.4;
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --letter-spacing-overline: 0.08em; /* nav, boutons, sur-titres en capitales */
  --letter-spacing-normal:   normal;

  /* ===== Espacements (spacing scale) ===== */
  --space-xs:  0.25rem;  /* 4px */
  --space-sm:  0.5rem;   /* 8px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px — rythme desktop genereux entre sections fortes (rendu editorial) */

  /* ===== Rayons de bordure (style épuré : peu ou pas arrondi, cf. brand.md §5) ===== */
  --radius-none: 0;
  --radius-sm:   2px;   /* boutons, cartes */
  --radius-md:   4px;   /* cartes plus larges si besoin d'un peu plus de douceur */
  --radius-full: 999px; /* bouton retour en haut, avatars, éléments circulaires */

  /* ===== Ombres (diffuses, jamais dures — profondeur "premium" sans lourdeur) ===== */
  --shadow-sm:     0 1px 3px rgba(22, 21, 19, 0.08);
  --shadow-md:     0 4px 16px rgba(22, 21, 19, 0.10);
  --shadow-lg:     0 24px 48px rgba(22, 21, 19, 0.16); /* cartes/CTA au survol, halo large et tres diffus */
  --shadow-header: 0 2px 8px rgba(22, 21, 19, 0.06); /* header sticky, cf. header.md */
  /* Ombres a plusieurs couches (contact rapproche + halo diffus) pour un effet "carte flottante"
     plus riche qu'une ombre plate unique (retour design : profondeurs multiples). */
  --shadow-float:       0 1px 2px rgba(22, 21, 19, 0.06), 0 16px 32px -12px rgba(22, 21, 19, 0.18);
  --shadow-float-hover: 0 2px 4px rgba(22, 21, 19, 0.08), 0 32px 56px -16px rgba(22, 21, 19, 0.22), 0 12px 24px -8px rgba(176, 141, 87, 0.18);

  /* ===== Transitions (cohérentes avec composants-communs.md / header.md) ===== */
  --transition-fast: 200ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  --easing-standard:  ease-out;
  --easing-luxe:      cubic-bezier(0.16, 1, 0.3, 1); /* deceleration douce type "ease-out-expo", survols/elevations */

  /* ===== Z-index (cohérence des couches, cf. header.md / composants-communs.md) ===== */
  --z-header:       100;
  --z-back-to-top:   90;
  --z-mobile-menu:  200;
  --z-overlay:      190;
  /* Modale d'accueil (pop-up d'ouverture) : au-dessus de tout, y compris la bannière cookies */
  --z-modal-overlay: 300;
  --z-modal:         310;
}