/* ==========================================================================
   WebHopper · tokens.css
   Les seules valeurs de design du site. Rien d'autre ne doit definir de couleur.
   Genere le 1er aout 2026 depuis la homepage. Charte Ember & Steel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   REGLE DE COULEUR LA PLUS IMPORTANTE : IL N'Y A QU'UN SEUL ORANGE.
   --------------------------------------------------------------------------
   --ambre #DE6300 est le seul ton d'orange du site. Ne jamais en introduire un
   second, en particulier pas une version foncee pour rattraper un contraste.
   Seules variantes admises : le survol du bouton de conversion, et les deux
   cremes de fond ci-dessous.

   L'orange atteint 3:1 sur fond clair mais pas 4,5:1. D'ou la regle de placement :

   ORANGE AUTORISE
     - grand texte sur clair : plus de 24px, ou plus de 18,7px en gras
       (mot accent du H1, HOPPER du logo, mots du manifeste, grand guillemet,
        chiffres du hero)
     - tout element graphique : bordures, filets, fleches, icones, puces,
       soulignements, points de timeline
     - les aplats
     - TOUT texte sur fond charbon, meme en 11px (4,92:1)

   ORANGE INTERDIT
     - petit texte sur fond clair. Il passe en --charbon ou --pierre, et recoit
       son accent par un element graphique orange place a cote.

   HIERARCHIE DE CONVERSION
     Un seul aplat orange plein par ecran, reserve au bouton de conversion
     (.btn-accent). Le bouton neutre (.btn-primary) est charbon plein. Ajouter
     un seul autre aplat orange ailleurs suffit a tuer le signal.
   -------------------------------------------------------------------------- */

:root{
  --charbon:#1A1918; --blanc:#FFFFFF;
  --ambre:#DE6300;        /* identite : aplats, filets, GRAND texte sur clair (3.19:1) et texte sur SOMBRE (4.92:1) */
  --ivoire:#F5F2ED; --pierre:#6B6560; --border-clair:#D8D4CE; --tag-dark-text:#C4C0BA;
  --ambre-pale:#FFF5EC; --ambre-pale2:#FCEBDC; --ink:#413d39;
  --r-tag:6px; --r-btn:8px; --r-card:10px; --r-section:14px; --r-pill:100px;
  --font-display:'Epilogue', sans-serif; --font-body:'Manrope', sans-serif; --font-mono:'IBM Plex Mono', monospace;
  --gutter:clamp(1.25rem, 5vw, 6rem); --maxw:1280px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Contrastes verifies (WCAG AA)
   orange sur ivoire ............ 3,19:1   grand texte et graphiques uniquement
   orange sur blanc ............. 3,56:1   idem
   orange sur creme pale ........ 3,31:1   icones et puces
   orange sur charbon ........... 4,92:1   tout texte, meme 11px
   charbon sur orange ........... 4,92:1   bouton de conversion
   charbon sur ivoire ........... 15,72:1
   ink sur ivoire ............... 9,64:1   corps de texte
   pierre sur ivoire ............ 5,14:1   texte secondaire            */