/* ============================================================
   css/tokens.css — Source de vérité des tokens EiKo
   Chargé AVANT le <style> de chaque page : une page peut donc
   encore surcharger localement le temps de la migration.

   Deux familles de palette :
     • app      — pages authentifiées (dark par défaut, light au toggle)
     • vitrine  — pages publiques (accueil, tarifs, cgv…), palette
                  éditoriale crème/navy/rouille de theme.css

   Le thème est posé sur <html> par js/theme-init.js (data-theme).
   La vitrine se déclare avec <html data-site="vitrine">.
   ============================================================ */

:root{
  /* ── Marque ──
     Rouille dans LES DEUX thèmes. Le bleu #1a8fff cohabitait avec le rouille
     de la nav et des bascules : selon le composant, un bouton était bleu ou
     rouille sur la même page. Une seule teinte de marque, point.
     Blanc sur #c1783c = 3,5:1, soit mieux que le bleu qu'il remplace (3,3:1). */
  --brand:#c1783c;      --brand-dk:#a8632c;
  --navy:#2a3b54;

  /* ── Surfaces & texte (dark, défaut) ── */
  --bg:#0b0f19;
  --surface:rgba(255,255,255,.045);
  --surface2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.09);
  /* Bordure des CHAMPS de saisie uniquement. --border, à 1,23:1, est un filet
     décoratif : un champ n'était localisable que par son libellé. Cette teinte
     est volontairement très proche du filet (1,4:1 contre 1,29) : juste assez
     pour dessiner le champ, pas au point d'alourdir la page. Les 3:1 de WCAG
     1.4.11 ont été essayés puis écartés — trop marqués pour ce design. Les boutons fantômes et les bascules gardent le filet : ils ont un
     fond et un libellé, leur contour ne porte pas seul l'affordance. */
  --border-champ:#373b43;
  --text:#e2e8f0;
  --muted:#64748b;

  /* ── Couleurs sémantiques (état, pas décoration) ── */
  --green:#34d399;   --amber:#fbbf24;   --red:#f87171;   --teal:#38bdf8;
  /* Le violet est retiré du site : il n'appartenait à aucune palette et
     entrait en conflit avec le rouille. Remplacé par le ciel, déjà présent
     dans theme.css (« mix fondu · ciel & rouille »). */
  --sky:#bcd6e8;     --sky-2:#8fc3d6;

  /* ── Typographie ── */
  --font-ui:'Syne',system-ui,-apple-system,sans-serif;
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;

  /* Échelle typo — pour le code nouveau ; l'existant n'est pas rétrofité */
  --fs-2xs:.68rem; --fs-xs:.72rem; --fs-sm:.78rem; --fs-md:.85rem;
  --fs-lg:.95rem;  --fs-xl:1.1rem; --fs-2xl:1.4rem;

  /* ── Espacement ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* ── Rayons ── */
  --r-sm:8px; --r-md:9px; --r-lg:14px; --r-pill:999px;

  /* ── Mouvement ── */
  --t-fast:.15s; --t-mid:.25s;

  /* ── Cible tactile minimale (WCAG 2.5.8) ── */
  --touch:44px;
}

/* ── Thème clair de l'app — palette éditoriale « ciel & rouille » ──
   Ces valeurs SONT le thème clair réel : la résolution page par page montrait
   déjà `--brand:#c1783c` sur les 29 pages. Elles vivaient jusqu'ici dans
   theme-editorial.css, chargé en dernier, qui écrasait une palette violette
   déclarée ici et dans plusieurs pages — un violet qui n'était la valeur
   finale nulle part. La fiction est supprimée, la couche d'arbitrage aussi. */
[data-theme="light"]{
  --brand:#c1783c;      --brand-dk:#a8632c;
  --navy:#2a3b54;
  --bg:#f6f2ea;
  --surface:#fffdf8;
  --surface2:#fbf8f1;
  --border:rgba(42,59,84,.12);
  --border-champ:#d5d8dd;   /* ~1,4:1 — à peine plus marqué que le filet (1,29) */
  --text:#241f1a;
  /* Teintes assombries jusqu'à 4,5:1 sur le fond crème, tonalité préservée.
     Les valeurs précédentes plafonnaient entre 2,8 et 3,7:1 — sous le seuil
     WCAG AA pour du texte normal, et ces couleurs servent surtout à des
     libellés et des états, souvent en petit corps. */
  --muted:#776d5f;
  --green:#117f3a;   --amber:#a75c05;   --red:#d81f25;   --teal:#0274af;
  /* Ciel assombri sur fond crème : #8fc3d6 n'y tiendrait pas la lisibilité.
     --sky-2 sert de couleur de TEXTE (noms de directeurs, première colonne de
     tableaux, libellés) depuis qu'il remplace l'ancien violet : il lui faut
     4,5:1, d'où #3a768c et non #3d7d94 (4,12:1). --sky reste décoratif. */
  --sky:#bcd6e8;     --sky-2:#3a768c;
}

/* ── Palette vitrine (pages publiques) ──
   Reprend theme.css : crème / navy / rouille / ciel / sauge. */
[data-site="vitrine"]{
  --brand:#c1783c;   --brand-dk:#a8632c;
  --navy:#2a3b54;    --sky:#bcd6e8;     --sky-2:#7fb0c4;
  --sage:#7bbf9a;    --gold:#b5832f;
  --bg:#f6f2ea;
  --surface:#fffdf8;
  --surface2:#fbf8f1;
  --border:rgba(42,59,84,.12);
  --border-champ:#d5d8dd;
  --text:#241f1a;
  --muted:#776d5f;
  --lead:#6a6055;
  /* La portée vitrine ne redéfinissait AUCUNE couleur sémantique : elle
     héritait donc de celles du thème sombre, posées sur un fond crème —
     --amber à 1,50:1, --teal à 1,92:1, --red à 2,48:1. Les ✓ de la grille
     tarifaire étaient à 1,93:1, quasi invisibles. Valeurs conformes ici ;
     --sage garde la teinte d'origine pour les usages décoratifs. */
  --green:#3b7b58;   --amber:#906803;   --red:#dc0b0b;   --teal:#0676a7;
}