/* ==========================================================================
   tanah — tokens.css
   Variables du design system : palette, typographie, espacements, grille.
   Toute valeur visuelle du site part d'ici.
   ========================================================================== */

/* ---------- Polices hébergées sur le serveur ---------- */

/* General Sans (seule police du site : titres et texte) — ITF Free Font License, voir fonts/general-sans/FFL.txt
   Fichier officiel Fontshare, non modifié (la licence interdit toute conversion ou découpe). */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}


:root {
  /* ---------- Palette de marque (CLAUDE.md §11, charte finalisée) ---------- */
  --terracotta: #B5622F;     /* signature : grands titres, accents */
  --encre: #2B2621;          /* texte courant, fonds sombres */
  --sable: #F7F2EA;          /* fond de page */
  --sable-clair: #E9E1D6;    /* texte et éléments sur fond sombre ou photo */
  --olive: #6B7A5E;          /* ROOT — Ubud */
  --ocean: #7C97A3;          /* RISE — Uluwatu */

  /* ---------- Variantes fonctionnelles ----------
     Contrastes mesurés. Seuils : 4,5:1 texte courant, 3:1 grands textes (≥ 24 px) et bordures. */
  --terracotta-fonce: #9A4F24;    /* terracotta foncée : petits textes terracotta (sur-titres, liens, mentions) et fond des boutons ; 5,3:1 sur sable */
  --terracotta-profond: #834722;  /* survol du bouton principal (texte sable 6,5:1) */
  --olive-fonce: #5A674F;         /* 5,4:1 sur sable — bloc ROOT (sable clair dessus 4,7:1) */
  --sable-soutenu: #EFE7DA;       /* fond de section alterné */
  --fond-champ: #FCFAF6;          /* fond des champs de formulaire */
  --root-pale: #E3E1D6;           /* fond de bloc ROOT (sable + 14 % olive) */
  --rise-pale: #E1E2DD;           /* fond de bloc RISE (sable + 18 % océan) */
  --texte-attenue: #6B625A;       /* 5,4:1 — légendes, aides */
  --trait: rgba(43, 38, 33, 0.14);        /* filets décoratifs */
  --trait-champ: #857C71;                  /* 3,7:1 — bordure de champ (seuil UI 3:1) */
  --voile-photo: linear-gradient(90deg, rgba(43, 38, 33, 0.72) 0%, rgba(43, 38, 33, 0.5) 55%, rgba(43, 38, 33, 0.3) 100%);

  /* ---------- Rôles (redéfinis par les sections sombres / univers) ---------- */
  --fond: var(--sable);
  --texte: var(--encre);
  --texte-doux: var(--texte-attenue);
  --titre: var(--terracotta);               /* h1 / h2 : terracotta (3,96:1, grands textes) */
  --accent-texte: var(--terracotta-fonce);  /* sur-titres, liens au survol */
  --focus: var(--terracotta-fonce);
  --aplat: #E6DDCF;                          /* aplats en attendant les photos */
  --aplat-2: #D9CDBC;
  --aplat-photo: #5C5247;                    /* aplat « photo sombre » (hero) */

  /* ---------- Typographie ---------- */
  --police-titre: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-texte: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --texte-xs: 0.8125rem;                                   /* 13 px */
  --texte-sm: 0.9375rem;                                   /* 15 px */
  --texte-base: 1.0625rem;                                 /* 17 px */
  --texte-lg: 1.25rem;                                     /* 20 px */
  --texte-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);         /* 24 → 32 px */
  --texte-2xl: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);      /* 32 → 52 px */
  --texte-3xl: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);        /* 40 → 80 px */

  --interligne: 1.6;
  --interligne-serre: 1.1;
  --interlettrage-titre: -0.01em;
  --interlettrage-surtitre: 0.16em;
  --interlettrage-logo: 0.32em;

  /* ---------- Espacements (base 4 px) ---------- */
  --esp-1: 0.25rem;   /*   4 */
  --esp-2: 0.5rem;    /*   8 */
  --esp-3: 1rem;      /*  16 */
  --esp-4: 1.5rem;    /*  24 */
  --esp-5: 2rem;      /*  32 */
  --esp-6: 3rem;      /*  48 */
  --esp-7: 4.5rem;    /*  72 */
  --esp-8: 7rem;      /* 112 */
  --esp-9: 10rem;     /* 160 */
  --esp-section: clamp(4.5rem, 2.6rem + 8vw, 10rem);   /* 72 → 160 entre sections */

  /* ---------- Grille ---------- */
  --colonnes: 4;
  --gouttiere: 1.25rem;          /* marge latérale */
  --gouttiere-grille: 1.25rem;   /* espace entre colonnes */
  --largeur-max: 75rem;          /* 1200 px */
  --largeur-texte: 38rem;        /* ~65 caractères */

  /* ---------- Divers ---------- */
  --hauteur-header: 4rem;
  --hauteur-controle: 3rem;      /* boutons et champs : 48 px */
  --rayon: 0;              /* cartes, aplats, blocs : angles droits */
  --rayon-controle: 4px;    /* boutons et champs : arrondi léger (maquette) */
  --transition: 200ms ease;
}

@media (min-width: 40rem) {
  :root {
    --colonnes: 6;
    --gouttiere: 2rem;
    --gouttiere-grille: 1.5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --colonnes: 12;
    --gouttiere: 3rem;
    --gouttiere-grille: 2rem;
    --hauteur-header: 5rem;
    --texte-base: 1.125rem;      /* 18 px sur ordinateur (lisibilité) */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}