/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — v0.63.202
   Valeurs partagées entre editor.html, qr.html, changelog.html, guide.html
   (+ tag.html pour la tranche safe-area).
   Objectif : une seule source de vérité pour les valeurs qui doivent rester
   identiques sur plusieurs pages, au lieu de N copies indépendantes qui
   dérivent au fil des retouches (cf. plusieurs sessions de fixes
   d'alignement de la pastille "Travel Tag" en v0.63.18x-19x, où corriger une
   page ne corrigeait pas les 3 autres — et le bug des drapeaux de tag.html
   trop près de la status bar, causé par une media query avec sa PROPRE
   valeur 16px divergente de la formule "officielle").

   Ce fichier ne doit contenir QUE des déclarations de variables (:root),
   jamais de règles de style qui s'appliquent directement — chaque page
   garde son propre CSS, qui vient juste LIRE ces valeurs via var(...).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Pastille "Travel Tag" (badge logo + texte dans le header) */
  --pastille-font-size: 24px;
  --pastille-line-height: 30px;
  --pastille-font-weight: 900;
  --pastille-letter-spacing: 0px;
  --pastille-gap: 0px;
  --pastille-padding: 8px 14px 8px 10px;
  --pastille-border-radius: 22px;
  --pastille-border-opacity: 0.35;
  --pastille-bg-opacity: 0.06;
  --pastille-logo-size: 38px;

  /* Safe-area — header partagé editor/qr/changelog/guide (structure grid vs
     flex différente selon la page, donc pas un seul padding composite, mais
     les MÊMES nombres réutilisés dans chaque formule). */
  --safe-top-extra: 8px;      /* offset additionnel au-dessus de l'inset iOS */
  --safe-side: 32px;          /* marge latérale mini, desktop */
  --safe-side-mobile: 16px;   /* marge latérale mini, ≤640px */

  /* Safe-area — header spécifique à tag.html (marge volontairement plus
     généreuse que les autres pages, cf. fix drapeaux trop proches de la
     status bar). Valeur répétée 2x dans tag.html (règle de base + media
     query ≤460px) : la divergence entre ces 2 endroits est EXACTEMENT le
     bug déjà corrigé une fois. */
  --safe-top-tag: 48px;
  --safe-top-tag-extra: 24px;

  /* Tailles des icon-btn (Save/Preview/QR/Preferences/...) */
  --icon-btn-size: 30px;          /* défaut (desktop + mobile normal) */
  --icon-btn-size-touch: 44px;    /* mobile ≤640px : zone tactile mini a11y */
  --icon-btn-size-compact: 26px;  /* toolbar QR mobile (5 boutons/ligne) */
}