/* ============================================================
   HORYOND AGENCY · Direction C « Papier »
   Design tokens · v1.0 · 26.08.2026
   Drop-in CSS custom properties. Framework-agnostic.
   ============================================================ */

:root {
  /* --- Encres / inks ------------------------------------- */
  --ho-ink:            #06080A;   /* texte, titres, filets majeurs, panneau brief */
  --ho-paper:          #EFEDE6;   /* fond de toutes les pages, cartes, wells */
  --ho-paper-shade:    #E3E0D6;   /* wells d'image, survol de ligne, cellules alt */
  --ho-voltage:        #0034E6;   /* PRIMAIRE : liens, plaques, aplats, trame */
  --ho-voltage-deep:   #0029B8;   /* well d'image sur aplat bleu */
  --ho-signal-hover:   #FF5B04;   /* survol de lien UNIQUEMENT · jamais au repos */
  --ho-archive-blue:   #0081CC;   /* alt / supports administratifs */

  /* --- Neutres / rules ----------------------------------- */
  --ho-rule-major:     #06080A;   /* filet 1px entre sections */
  --ho-rule-minor:     #CFCABC;   /* filet 1px : cellules, contours de carte */
  --ho-label:          rgba(6, 8, 10, 0.72); /* plancher des gris · micro-labels */
  --ho-text-2:         rgba(6, 8, 10, 0.68); /* corps de texte secondaire */
  --ho-text-strong:    rgba(6, 8, 10, 0.82); /* corps de texte dense */

  /* --- Sémantiques (contraste AA sur papier) ------------- */
  --ho-success:        #147A43;
  --ho-error:          #C0341E;

  /* --- Sur aplat bleu voltage ---------------------------- */
  --ho-on-voltage:        #EFEDE6;              /* texte papier sur bleu */
  --ho-on-voltage-soft:   rgba(239,237,230,.86);
  --ho-on-voltage-link:   #6E7BFF;              /* lien clair sur encre */

  /* --- Panneau brief (encre) ----------------------------- */
  --ho-brief-bg:       #06080A;
  --ho-brief-label:    #8A8578;
  --ho-brief-value:    #EFEDE6;
  --ho-brief-link:     #6E7BFF;

  /* --- Trame 1 bit (dither ordonné 4×4) ------------------ */
  --ho-grain:          3px;        /* 2 = écran fin · 3 = défaut · 6 = grand format */
  --ho-grain-ink:      var(--ho-voltage); /* encre par défaut ; #06080A pour portraits */
  /* Formule : bloc allumé si  L' > (bayer[y%4][x%4] + 0.5) / 16
     avec L' = clamp((L - 0.06) / 0.84, 0, 1)  (lift des noirs)
     Matrice de Bayer 4×4 : 0 8 2 10 / 12 4 14 6 / 3 11 1 9 / 15 7 13 5 */

  /* --- Typographie --------------------------------------- */
  --ho-font-display:   'Archivo', system-ui, sans-serif;
  --ho-wdth-display:   104;   /* largeur variable des titres (118 pour le wordmark) */
  --ho-font-mono:      'JetBrains Mono', ui-monospace, monospace;
  /* Casse : les titres sont en CASSE PHRASE (pas de text-transform),
     les micro-labels/plaques en UPPERCASE. */

  /* --- Échelle typographique (fluide, calibree 320 -> 1280) --
     Titres display en clamp(px) (decoratifs) ; texte de lecture en rem
     (honore la taille par defaut du navigateur). Les CAPS = valeurs desktop
     historiques (grand format inchange) ; les MIN travaillent des 320px (fin de
     l'echelle plate sous 810px). NB : --ho-body reste une COULEUR (definie dans
     site.css) ; la TAILLE de corps est --ho-fs-body. */
  --ho-fs-h1:       clamp(36px, 22.7px + 4.15vw, 76px);   /* hero */
  --ho-fs-h1-page:  clamp(32px, 20px + 3.75vw, 68px);     /* pages internes */
  --ho-fs-h2:       clamp(29px, 20.5px + 2.55vw, 54px);
  --ho-fs-h3:       clamp(20px, 18px + 0.63vw, 26px);
  --ho-fs-intro:    clamp(24px, 16.7px + 2.29vw, 46px);   /* pull-quote intro */
  --ho-fs-lead:     clamp(1.0625rem, 0.975rem + 0.44vw, 1.1875rem); /* 17 -> 19px */
  --ho-fs-body:     1.0625rem;                            /* 17px ; 16px sous 360px */
  --ho-mono-label:  10px;                 /* plancher 11px sous 480px (voir site.css) */

  /* --- Formes -------------------------------------------- */
  --ho-radius:         0;          /* RAYON ZÉRO partout, sans exception */
  --ho-gap:            clamp(20px, 16px + 1.25vw, 26px);  /* grilles : 20 mobile -> 26 desktop */
  --ho-margin:         36px;       /* 20px en mobile (<=720), 16px (<=360) */
  --ho-container:      1280px;     /* 1340px pour les grilles pleine largeur */
  --ho-section-y:      clamp(48px, 8vw, 76px);  /* padding vertical de section : 48 mobile -> 76 desktop */

  /* --- Échelle d'espacement (base 4) ---------------------- */
  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px;

  /* --- Mouvement ----------------------------------------- */
  --ho-dur-1:          100ms;      /* survols, inversions d'aplat */
  --ho-dur-2:          180ms;
  --ho-dur-3:          280ms;
  --ho-ease:           cubic-bezier(.2, .8, .2, 1);
  --ho-ease-snap:      cubic-bezier(.7, 0, .3, 1);
}

/* Resets recommandés (à adapter à l'environnement cible) */
/*
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--ho-paper); color: var(--ho-ink);
         font-family: var(--ho-font-display); -webkit-font-smoothing: antialiased; }
  a { color: var(--ho-voltage); text-decoration: none; }
  a:hover { color: var(--ho-signal-hover); }
  ::selection { background: var(--ho-voltage); color: var(--ho-paper); }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
*/