/* =============================================================
   HERE — tokens.css
   Source unique de vérité de la charte (couleurs, typo, espacements).
   Dérivé des maquettes Figma « Here » (Reims — champagne / lieu haut de gamme).
   AUCUNE valeur de style en dur ailleurs : tout passe par ces variables.

   Statut des valeurs :
   ✅ = relevé fiable depuis les maquettes
   ⚠️ = PROVISOIRE — à confirmer sur les vraies valeurs Figma
        (rate-limit MCP atteint : voir tâche « Confirmer polices + vert »)
   ============================================================= */

:root {

  /* ---------------------------------------------------------
     1. COULEURS
     Site clair d'abord (papier blanc cassé + encre noire),
     avec des sections image plein cadre sombres et un vert
     forêt en couleur de signature.
     --------------------------------------------------------- */

  /* Fonds clairs */
  --color-bg:            #FCFCFC;   /* ✅ papier principal (Home, Contact, What's up) */
  --color-bg-alt:        #F4F3EF;   /* ⚠️ papier chaud alt (sections/cartes) — à affiner */

  /* Fonds sombres (héros image, Private Events, sections plein cadre) */
  --color-surface-dark:  #0C0C0C;   /* ✅ quasi-noir des sections sombres */
  --color-surface-green: #2A3E2F;   /* ✅ vert forêt de marque (confirmé Figma) */

  /* Encre / texte */
  --color-text:          #0C0C0C;   /* ✅ texte principal sur fond clair */
  --color-text-soft:     #54544A;   /* ⚠️ texte secondaire / légendes (gris chaud) */
  --color-text-invert:   #FCFCFC;   /* ✅ texte sur fond sombre/vert */

  /* Filets & bordures */
  --color-line:          #D8D8D8;   /* ✅ hairline sur fond clair */
  --color-line-soft:     #E8E8E4;   /* ⚠️ filet très discret */
  --color-line-invert:   rgba(255,255,255,.18); /* filet sur fond sombre */

  /* Accent de marque (dérivé du vert de signature) */
  --color-accent:        var(--color-surface-green); /* alias sémantique */
  --color-accent-deep:   #1D2B21;   /* ✅ vert plus profond (hover / aplats), dérivé de #2A3E2F */

  /* États */
  --color-focus:         #2A3E2F;   /* anneau de focus accessibilité */


  /* ---------------------------------------------------------
     2. TYPOGRAPHIE
     ⚠️ FAMILLES À CONFIRMER — les polices ne sont pas lisibles
     depuis les pixels. Placeholders neutres pour que le
     styleguide s'affiche proprement ; à remplacer par les
     polices réelles du Figma (voir tâche de confirmation).
     --------------------------------------------------------- */

  /* Familles */
  --font-display: "Quablo", "Helvetica Neue", Arial, sans-serif;    /* ✅ display / wordmark — Quablo SemiBold (600), geometric sans */
  --font-body:    "Poppins", system-ui, -apple-system, Helvetica, Arial, sans-serif; /* ✅ corps — Poppins Medium (500) */
  --font-label:   var(--font-body);  /* petites capitales espacées (labels rubriques) */
  --fw-display:   600;   /* ✅ graisse du wordmark/display Quablo (SemiBold) */
  --fw-body:      500;   /* ✅ graisse du corps Poppins (Medium) */

  /* Graisses */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Échelle typo fluide (clamp — web-quality, mobile → 4K) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.5vw, 6.5rem);  /* héros / wordmark */
  --fs-h1:      clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  --fs-body:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-small:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --fs-label:   clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem); /* labels UPPERCASE */

  /* Interlignage */
  --lh-tight: 1.05;   /* grands titres */
  --lh-snug:  1.25;
  --lh-body:  1.35;   /* ✅ corps Poppins — 27/20 Figma */
  --lh-read:  1.6;    /* interligne lecture longue (paragraphes) */

  /* Interlettrage */
  --ls-wordmark: 4.1em;         /* ✅ 410% Figma (= 4.1em) — wordmark « H E R E . » HERO (70px), centré, uppercase */
  --ls-wordmark-compact: 0.15em; /* wordmark réduit (header / nav) — cf. « HERE. » compact du header Home */
  --ls-body:     0.04em;  /* ✅ 4% Figma — corps Poppins */
  --ls-label:    0.22em;  /* petites capitales rubriques */
  --ls-tight:    -0.01em; /* grands titres */


  /* ---------------------------------------------------------
     3. ESPACEMENTS (échelle 4/8 + espaces de section fluides)
     --------------------------------------------------------- */
  --space-2:  0.125rem;
  --space-4:  0.25rem;
  --space-8:  0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;

  /* Respirations de section (fluides) */
  --section-y:  clamp(3.5rem, 2rem + 7vw, 9rem);
  --gutter:     clamp(1.25rem, 0.8rem + 2vw, 3rem);   /* marge latérale */
  --content-max: 1280px;    /* largeur de lecture max */
  --measure:     68ch;      /* largeur de paragraphe confort */


  /* ---------------------------------------------------------
     4. RADIUS, FILETS, OMBRES
     Esthétique éditoriale : angles nets, quasi pas d'ombres.
     --------------------------------------------------------- */
  --radius-0: 0;            /* défaut : coins nets (éditorial) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --hairline: 1px;          /* épaisseur des filets */
  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);


  /* ---------------------------------------------------------
     5. MOUVEMENT — tokens alignés sur la `motion-charte` (autoritaire)
     --------------------------------------------------------- */
  --dur-instant: 100ms;  /* feedback : couleur/opacité, sans déplacement */
  --dur-fast:    180ms;  /* micro-interactions : hover, focus */
  --dur-base:    260ms;  /* défaut : apparition d'élément, fade */
  --dur-slow:    420ms;  /* modale, panneau, changement de vue */
  --dur-slide:   600ms;  /* entrée de section/hero — plafond */

  --ease-out:    cubic-bezier(.16,1,.3,1);   /* DÉFAUT entrées */
  --ease-in-out: cubic-bezier(.65,0,.35,1);  /* déplacements A→B */
  --ease-in:     cubic-bezier(.4,0,1,1);     /* sorties */
  --ease-soft:   cubic-bezier(.4,0,.2,1);    /* passe-partout discret */
  --ease-out-soft: var(--ease-out);          /* alias rétro-compat */
}

/* Respect strict de prefers-reduced-motion (web-quality / motion-charte) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-slide:0ms; }
}