/* tokens.css — Villa Vida, charte graphique v1.0 (octobre 2026).
   UNIQUE source des variables du site (brief de build §2). Aucune page ne définit de couleur, de police ni de durée :
   elle compose avec ces tokens. Toute nouvelle variable passe par ce fichier (et par STYLEGUIDE.md).

   La maison : le noir domine, l'or signe, le blanc porte le logo (disque) et les documents (billets).
   Les huit notes du logo ne vivent QUE dans le logo : le site n'en utilise aucune (Winter = or, sans note).
   Jamais de dégradé entre deux couleurs ; une photo n'est voilée que de noir (dégradé noir sous le texte). */

/* Propriétés typées : nécessaires pour animer des longueurs lues par le script ou interpolées en CSS. */
@property --ecart     { syntax: '<length>';     inherits: true; initial-value: 0px; }
@property --g         { syntax: '<length>';     inherits: true; initial-value: 0px; }
@property --off       { syntax: '<length>';     inherits: true; initial-value: 0px; }
@property --noeud-y   { syntax: '<length>';     inherits: true; initial-value: 0px; }

:root {
  /* ------------------------------------------------------------------ la maison (charte §07) */
  --noir:   #0A0908;   /* Noir Villa : le fond. Texte crème 17,6:1, or 8,1:1 */
  --noir-2: #14120F;   /* surfaces posées sur le noir (cartes, colonne de 45 %) */
  --noir-3: #1E1B17;   /* surface d'un état (survol d'une ligne, champ) */
  --or:     #C6A03E;   /* Or Villa : titres sur noir, filets, cartouches, bouton principal (texte noir 8,1:1) */
  --or-clair:   #E4C878; /* survol, petites mentions sur noir */
  --or-profond: #7E5F12; /* l'or des textes sur blanc (5,9:1) ; jamais l'or Villa sur blanc (2,5:1) */
  --blanc:  #FFFFFF;   /* le disque du logo, les documents (billets) */
  --texte:   #F2EEE6;  /* texte courant sur noir (17,6:1) */
  --texte-2: #CFC9BD;  /* texte secondaire sur noir (12,3:1) */
  --texte-3: #A39C90;  /* mentions, légendes discrètes (7,4:1) */
  --ligne:        rgb(198 160 62 / 17%);   /* bord d'une carte */
  --ligne-forte:  rgb(198 160 62 / 38%);   /* filet de liste */

  /* ------------------------------------------------------------------ rôles (noms historiques, valeurs de la charte)
     Les pages composent avec ces rôles : changer un rôle ici repeint tout le site. */
  --guide:  var(--noir);     /* colonne de 55 % (celle qui guide) */
  --suit:   var(--noir-2);   /* colonne de 45 % (celle qui suit) */
  --nuit:   var(--noir);     /* chapitre de nuit */
  --encre:  var(--noir);     /* texte sur blanc ou sur or, aplats noirs */
  --papier: var(--blanc);    /* surfaces blanches : billets, disque ; jamais du texte (le texte est --texte) */
  --encre-douce: #3A3A3A;    /* texte secondaire sur blanc uniquement (11,4:1) */

  /* ------------------------------------------------------------------ les deux colonnes, séparées par le filet or */
  --part-suit: 45%;      /* largeur de la colonne noir-2 (celle qui suit) */
  --part-guide: 55%;     /* largeur de la colonne noire (celle qui guide) */
  --fil: 2px;            /* le filet or (charte §10 : 2 px à l'écran) */
  --fond-couture: linear-gradient(90deg,
      var(--suit) 0 calc(var(--part-suit) - var(--fil) / 2),
      var(--or) calc(var(--part-suit) - var(--fil) / 2) calc(var(--part-suit) + var(--fil) / 2),
      var(--guide) calc(var(--part-suit) + var(--fil) / 2) 100%);
  --fond-inverse: linear-gradient(90deg,
      var(--guide) 0 calc(var(--part-guide) - var(--fil) / 2),
      var(--or) calc(var(--part-guide) - var(--fil) / 2) calc(var(--part-guide) + var(--fil) / 2),
      var(--suit) calc(var(--part-guide) + var(--fil) / 2) 100%);
  /* sans filet (les colonnes se touchent) : sous du texte courant qui traverse la séparation */
  --fond-touche: linear-gradient(90deg, var(--suit) 0 var(--part-suit), var(--guide) var(--part-suit) 100%);
  --fond-inverse-touche: linear-gradient(90deg, var(--guide) 0 var(--part-guide), var(--suit) var(--part-guide) 100%);

  /* ------------------------------------------------------------------ transparences (toujours dérivées de la maison) */
  --filet: var(--ligne-forte);                                        /* filets de liste */
  --voile-papier: color-mix(in srgb, var(--or) 12%, transparent);     /* survol / focus d'une surface sur noir */
  --voile-encre: color-mix(in srgb, var(--or) 8%, transparent);       /* survol d'un grand lien sur noir */
  --voile-reliure: color-mix(in srgb, var(--noir) 22%, transparent);  /* creux d'une reliure, d'un pli */
  --ombre: color-mix(in srgb, var(--noir) 30%, transparent);          /* ombre d'un document posé (billet) */
  --ombre-forte: color-mix(in srgb, var(--noir) 45%, transparent);
  /* le voile des photos (charte §11) : un dégradé NOIR sous le texte, jamais un voile de couleur */
  --voile-photo: linear-gradient(to top, color-mix(in srgb, var(--noir) 88%, transparent) 0%, color-mix(in srgb, var(--noir) 55%, transparent) 45%, transparent 100%);

  /* ------------------------------------------------------------------ matière : aucune (charte : « noir plat ») */
  --grain: none;
  --grain-taille: 220px;
  --grain-opacite: 0;

  /* ------------------------------------------------------------------ typographie (charte §09 : Anybody + Epilogue) */
  --f-display: 'Anybody', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --f-texte: 'Epilogue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Toujours une composante rem (WCAG 1.4.4, F94). Le vw pur n'est permis que sur un doublon aria-hidden. */
  --t-h1: clamp(3rem, 1rem + 20vw, 11rem);
  --t-h2: clamp(3rem, 1.75rem + 5.4vw, 8.25rem);    /* duo-titres de chapitre : 48 px min (délié 100 ≥ 48 px) */
  --t-h3: clamp(1.75rem, 1.15rem + 2.6vw, 3.5rem);
  --t-titre: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);
  --t-corps: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  --t-petit: clamp(.9375rem, .9rem + .15vw, 1.0625rem);
  --t-mini: .75rem;
  --interligne: 1.5;

  /* le plein et le délié (charte §09) */
  --delie: 'wdth' 140, 'wght' 200;
  --delie-serre: 'wdth' 96, 'wght' 200;
  --plein: 'wdth' 56, 'wght' 900;
  --plein-ouvert: 'wdth' 100, 'wght' 900;
  --noeud: 'wdth' 150, 'wght' 900;

  /* ------------------------------------------------------------------ motion : la bachata à 130 BPM */
  --temps: 461ms;
  --mesure: 1844ms;
  --elan: cubic-bezier(.2, .7, .2, 1);
  --prise: cubic-bezier(.3, 1.35, .5, 1);
  --vt: 260ms;

  /* ------------------------------------------------------------------ espace et cadre */
  --marge: clamp(1rem, .5rem + 2.2vw, 3rem);
  --pas: clamp(4rem, 2.5rem + 7vw, 10rem);
  --bandeau-h: 28px;
  --disque-barre: 96px;   /* charte §05 : le logo en disque ne descend jamais sous 96 px (« la taille de l'en-tête du site ») */
  --barre-h: 108px;
  --rayon: 10px;
  --mesure-texte: 34rem;

  /* ------------------------------------------------------------------ profondeur */
  --z-texte: 4;
  --z-billet: 7;
  --z-noeud: 8;
  --z-barre: 50;
  --z-journee: 80;
  --z-evitement: 100;

  color-scheme: dark;
}