/* ==========================================================================
   SUITE EVASION — DESIGN TOKENS
   Source unique de vérité. Ce fichier est importé par :
     1. le thème WordPress (site vitrine)
     2. l'app Next.js (moteur de réservation)
   Ne jamais redéfinir une couleur ailleurs : toujours passer par un token.
   Référence : Charte graphique Suite Evasion 2025 — Studio Patoon
   ========================================================================== */

:root {
  /* --- Palette charte (valeurs exactes, ne pas modifier) --------------- */
  --se-jade:        #0D413E; /* principale / identitaire */
  --se-midnight:    #1C323A; /* principale */
  --se-vanilla:     #F7CD9C; /* principale */
  --se-pink:        #F0DDDE; /* accompagnement */
  --se-ambre:       #E8461B; /* accompagnement — accent */
  --se-morning:     #E2E9E4; /* accompagnement */
  --se-grey:        #EDEDED; /* accompagnement */
  --se-dark-night:  #1D1D1B; /* accompagnement */

  /* --- Extensions tonales (dérivées, pour profondeur et lisibilité) ---- */
  --se-jade-abyss:  #051A18; /* fond le plus profond */
  --se-jade-deep:   #082B29;
  --se-jade-soft:   #14544F;
  --se-vanilla-dim: #C9A578;
  --se-cream:       #FBF7F0; /* fond clair chaud, sections lumineuses */
  --se-sand:        #EFE6D9;

  /* --- Rôles sémantiques : SOMBRE (défaut du site) -------------------- */
  --bg:             var(--se-jade-abyss);
  --bg-raised:      var(--se-jade-deep);
  --bg-inset:       #041412;
  --ink:            #F4EFE6; /* texte principal sur fond sombre */
  --ink-muted:      rgba(244, 239, 230, .62);
  --ink-faint:      rgba(244, 239, 230, .34);
  --accent:         var(--se-vanilla);
  --accent-warm:    var(--se-ambre);
  --rule:           rgba(247, 205, 156, .18);
  --rule-strong:    rgba(247, 205, 156, .38);

  /* --- Rôles sémantiques : CLAIR (sections inversées) ------------------ */
  --bg-light:       var(--se-cream);
  --ink-on-light:   var(--se-jade);
  --ink-on-light-muted: rgba(13, 65, 62, .68);
  --rule-on-light:  rgba(13, 65, 62, .16);

  /* --- Ambiances par suite (chaque suite a sa température) ------------- */
  --penida-bg:      #0E2E2C;
  --penida-accent:  #AAE5D7; /* Figma La Penida */
  --penida-glow:    rgba(170, 229, 215, .22);
  --alpina-bg:      #22140C;
  --alpina-accent:  #E2A66A;
  --alpina-glow:    rgba(226, 166, 106, .26);

  /* --- Typographie ----------------------------------------------------- */
  --font-display: "Dela Gothic One", "Times New Roman", serif; /* titres charte */
  --font-serif:   "Lora", Georgia, "Times New Roman", serif;   /* éditorial */
  --font-sans:    "Poppins", "Helvetica Neue", Arial, sans-serif; /* UI */

  /* Échelle fluide — clamp(min, préféré, max) */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --t-xl:   clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --t-2xl:  clamp(2rem, 1.55rem + 2.2vw, 3.25rem);
  --t-3xl:  clamp(2.5rem, 1.7rem + 3.6vw, 4.75rem);
  --t-4xl:  clamp(2.75rem, 1.5rem + 5.4vw, 6.25rem);

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.62;

  --track-wide:  0.18em; /* eyebrows, labels */
  --track-tight: -0.02em;

  /* --- Espacement (échelle 4px) ---------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;
  --section-y: clamp(4.5rem, 9vw, 10rem);
  --gutter:    clamp(1.25rem, 5vw, 5rem);
  --measure:   64ch;   /* longueur de ligne confortable */
  --maxw:      86rem;  /* largeur de contenu */

  /* --- Formes ----------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;
  --r-arch: 9999px 9999px 0 0; /* arche parfaite (demi-cercle), rappel du soleil du logo */

  /* --- Élévation -------------------------------------------------------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .22);
  --shadow-md: 0 18px 45px -18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .7);

  /* --- Mouvement -------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --d-fast: 180ms;
  --d-base: 420ms;
  --d-slow: 900ms;

  /* --- Couches ---------------------------------------------------------- */
  --z-grain: 1;
  --z-nav: 90;
  --z-modal: 200;
}

/* Respect strict de la préférence système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; }
}