/**
 * tokens.css — Design Tokens
 * Motmot Treks — Design System V1, sections 1 & 2.
 *
 * Socle technique du thème. Aucune valeur de couleur, d'espacement
 * ou de typo n'est écrite en dur ailleurs : tout vient d'ici.
 *
 * Deux niveaux :
 *  - Tokens primitifs   : valeurs brutes (--green-700, --space-4).
 *  - Tokens sémantiques : intention d'usage (--surface-primary).
 * Les composants ne consomment QUE les tokens sémantiques.
 */

/* ============================================================
   1. TOKENS PRIMITIFS
   ============================================================ */

:root {

	/* --- Couleur : vert profond (ancré sur #333819) --- */
	--green-900: #21240f;
	--green-800: #2b2f14;
	--green-700: #333819;  /* couleur officielle */
	--green-600: #434a22;
	--green-500: #5a6330;
	--green-400: #788246;
	--green-300: #9aa36a;

	/* --- Couleur : neutres chauds (ancrés sur #fff9f6) --- */
	--sand-50:  #fff9f6;   /* couleur officielle */
	--sand-100: #f6efe9;
	--sand-200: #e7ddd3;
	--sand-300: #cdbfb1;
	--sand-400: #a8998a;
	--sand-500: #7d7064;

	/* Papier de la scène : teinte moyenne de assets/img/fond-carnet-8.webp,
	   le support texturé sur lequel le carnet est posé. Sert de fond de
	   repli tant que l'image n'est pas chargée — le hero ne clignote pas
	   du crème officiel au beige. Plus sombre que --sand-50 : c'est ce
	   qui détache le papier du carnet (#fffded) de son support — la
	   texture v3 étant plus claire que les précédentes, c'est cet écart-là
	   qu'il faut surveiller si le carnet se met à se fondre dans la table. */
	--sand-150: #efe5d0;

	/* Le papier de la carte, un cran plus clair que la table. Il ne vient
	   pas de l'échelle sand ci-dessus, plus rosée : posée sur la texture,
	   elle y tranchait au lieu de s'y poser. Celui-ci est calé sur
	   --sand-150, dont il n'est qu'un éclaircissement. */
	--sand-125: #f4ece0;

	/* Les cartes-liens du site — les deux de la double page desktop
	   (« the rest of this page » et le lien composé librement) ET celle de
	   la story mobile. Harmonisées le 2026-07-31 sur demande de l'auteur
	   du site, après avoir été séparées quelques heures le même jour (la
	   story était restée blanche à l'encre). Le jeton est nommé sur le
	   COMPOSANT, pas sur une surface : c'est ce qui doit rester vrai si
	   l'un des deux formats évolue.

	   Le vert vient de la carte du Guatemala — la famille des régions
	   qu'on peut ouvrir (.explore__map [data-department] dans main.css) —
	   référencé et non recopié, pour que les liens et la carte parlent la
	   même langue.

	   Assombri d'un cran le même jour (--green-300 → --green-500) : le
	   crème donnait 2.57:1 sur le vert clair, sous le minimum AA de
	   4.5:1 ; il tient maintenant à 6.1:1. La lisibilité est posée non
	   négociable (clientèle ornithologue 50+, CLAUDE.md et CONCEPT.md §9).
	   Si la teinte doit encore descendre : --green-600 (#434a22) donne
	   9.0:1. Ne pas remonter au-dessus de --green-500 en gardant le crème.

	   Ceci ne fond PAS les deux formats l'un dans l'autre : la story reste
	   « un objet à part, pas une déclinaison » (CONCEPT.md §12.10), elle
	   partage seulement la matière de ce composant.

	   L'éditeur d'admin recopie ces valeurs en dur (inc/meta-boxes.php, qui
	   ne charge pas ce fichier) — si celles-ci bougent, celles-là bougent. */
	--link-card-bg: var(--green-500);
	--link-card-ink: var(--sand-50);

	/* --- Accent unique (CTA) : terracotta organique, rare --- */
	--accent-500: #c4612f;
	--accent-600: #a64f24;

	/* --- États fonctionnels (sobres) --- */
	--signal-error:   #b14638;
	--signal-success: #5a6330;

	/* --- Espacement : base 4px, progression non linéaire --- */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-6:  24px;
	--space-8:  32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--space-32: 128px;

	/* --- Rayons : discrets --- */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-full: 999px;

	/* --- Élévation : minimale --- */
	--shadow-card:  0 2px 12px rgba(33, 36, 15, 0.18);
	--shadow-menu:  0 8px 32px rgba(33, 36, 15, 0.28);
	--shadow-modal: 0 16px 48px rgba(33, 36, 15, 0.40);

	/* --- Matériau « verre » (aqua) ---------------------------
	   Valeurs brutes de l'effet translucide premium (header,
	   bouton retour de la fiche de tour, cartes immersives).
	   L'effet « aqua » naît du matériau — translucidité, flou
	   d'arrière-plan, fin bord lumineux — jamais d'une teinte.
	   --------------------------------------------------------- */
	/* Voiles teintés vert profond, du plus léger au plus dense. */
	--glass-tint-faint:  rgba(33, 36, 15, 0.32);
	--glass-tint-medium: rgba(33, 36, 15, 0.55);
	--glass-tint-strong: rgba(33, 36, 15, 0.72);
	/* Liserés de lumière : un clair en haut, un sombre en bas,
	   pour le relief « biseau » caractéristique du verre. */
	--glass-edge-light:  rgba(255, 249, 246, 0.22);
	--glass-edge-dark:   rgba(33, 36, 15, 0.45);
	/* Intensité du flou d'arrière-plan (backdrop-filter). */
	--glass-blur:        14px;
	--glass-blur-strong: 22px;
	/* Halo de profondeur sous une surface en verre. */
	--glass-shadow:      0 6px 24px rgba(33, 36, 15, 0.30);

	/* --- Motion --- */
	--duration-fast:   160ms;
	--duration-medium: 280ms;
	--duration-slow:   520ms;
	--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

	/* --- Motion : gestes ponctuels (Design System — section Explore) ---
	   Un tourné de page se lit mal en dessous de ~650ms (trop sec pour
	   passer pour du papier) et se traîne au-delà de 900ms (trop lent
	   pour rester un geste, pas une contemplation). --ease-page-turn a
	   un léger dépassement pour suggérer l'inertie de la page. */
	--duration-page-turn: 720ms;
	--ease-page-turn: cubic-bezier(0.45, 0, 0.2, 1);

	/* --- Z-index : échelle nommée et figée --- */
	--z-content:     1;
	--z-header:      100;
	--z-mobile-menu: 200;
	--z-overlay:     300;
	--z-modal:       400;
	--z-toast:       500;

	/* --- Typographie : familles --- */
	--font-display: 'Shantell Sans', Georgia, 'Times New Roman', serif;
	--font-text:    'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* --- Typographie : échelle fluide, ratio 1.25 --- */
	--text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
	--text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
	--text-base: clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
	--text-lg:   clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
	--text-xl:   clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	--text-2xl:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
	--text-3xl:  clamp(2.6rem, 2.1rem + 2.6vw, 4.5rem);

	/* --- Typographie : interlignes, graisses, interlettrage --- */
	--leading-tight:   1.12;
	--leading-snug:    1.3;
	--leading-relaxed: 1.6;

	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;

	--tracking-tight:  -0.01em;
	--tracking-normal: 0;
	--tracking-wide:   0.12em;

	--measure-ideal: 66ch;

	/* --- Layout : largeurs de conteneur --- */
	--container-text: 680px;
	--container-base: 1200px;
	--container-wide: 1600px;

	/* --- Layout : hauteur du bandeau fixe (header, bord compris) ---
	   Un seul token, lu partout où quelque chose doit se caler sous le
	   header fixe ou compenser sa présence (.site-main, les ancres de
	   scroll, le centrage du hero-carnet) — jamais redit en dur à
	   chaque endroit. Cette valeur par défaut est desktop ; les paliers
	   mobiles la resurchargent dans assets/css/main.css, à côté de
	   .site-header__inner. */
	--header-h: 81px;

	/* --- Layout : rythme vertical de section --- */
	--section-pad-compact:   clamp(var(--space-12), 6vw, var(--space-16));
	--section-pad-default:   clamp(var(--space-16), 9vw, var(--space-24));
	--section-pad-immersive: clamp(var(--space-24), 14vw, var(--space-32));

	/* --- Imagerie : ratios --- */
	--ratio-hero:      16 / 9;
	--ratio-hero-tall: 4 / 5;
	--ratio-landscape:      3 / 2;
	--ratio-landscape-tall: 4 / 3;
	--ratio-portrait:  4 / 5;
	--ratio-square:    1 / 1;
	--ratio-cinema:    21 / 9;

	/* --- Imagerie : overlays --- */
	--overlay-hero: linear-gradient(180deg,
		rgba(33, 36, 15, 0) 35%,
		rgba(33, 36, 15, 0.55) 70%,
		rgba(33, 36, 15, 0.85) 100%);
	--overlay-hover: rgba(33, 36, 15, 0.25);
	--overlay-card: linear-gradient(180deg,
		rgba(33, 36, 15, 0) 45%,
		rgba(33, 36, 15, 0.78) 100%);

	/* --- Iconographie --- */
	--icon-sm: 16px;
	--icon-md: 20px;
	--icon-lg: 24px;
	--icon-xl: 32px;
	--icon-stroke: 1.5px;
}

/* ============================================================
   2. TOKENS SÉMANTIQUES (thème sombre par défaut)
   Les composants ne consomment QUE ces tokens.
   ============================================================ */

:root {

	/* --- Surfaces --- */
	--surface-primary: var(--green-700);
	--surface-raised:  var(--green-600);
	--surface-inverse: var(--sand-50);

	/* --- Texte --- */
	--text-primary:   var(--sand-50);
	--text-muted:     var(--sand-300);
	--text-on-accent: var(--sand-50);

	/* --- Bordures --- */
	--border-subtle: var(--green-500);

	/* --- Action (CTA) --- */
	--action-primary:       var(--accent-500);
	--action-primary-hover: var(--accent-600);

	/* --- Surface « verre » (aqua) ----------------------------
	   Intention d'usage du matériau translucide. Un composant
	   en verre consomme ces tokens, jamais les primitifs.
	   Deux densités : --glass-surface pour l'état posé/scrollé,
	   --glass-surface-light pour l'état survol d'un hero.
	   --------------------------------------------------------- */
	/* Assombris d un cran : sur le papier crème du hero, l état léger à
	   0.32 laissait un bandeau sage trop pâle — le logo et la navigation
	   crème y manquaient d assise. Ces deux alias ne servent qu au header
	   (les tons de verre eux-mêmes restent inchangés ailleurs). */
	--glass-surface:       var(--glass-tint-strong);
	--glass-surface-light: var(--glass-tint-medium);
	--glass-surface-raised: var(--glass-tint-strong);
	--glass-border:        var(--glass-edge-light);
	--glass-border-shade:  var(--glass-edge-dark);

	/* --- Overlay image (générique) --- */
	--overlay-image: linear-gradient(180deg,
		rgba(33, 36, 15, 0) 30%,
		rgba(33, 36, 15, 0.75) 100%);

	/* --- Anneau de focus (accessibilité — jamais supprimé) --- */
	--focus-ring: 0 0 0 3px var(--sand-50), 0 0 0 5px var(--accent-500);
}