/* ═══════════════════════════════════════════════════════════════════
   assets/syn-theme.css — les jetons communs du site (identité Synétiq)

   Une seule source : les valeurs de assets/etq2.css (page Étiquettes),
   au violet de marque. Le webmaster les modifie dans Admin › Apparence ;
   ses choix arrivent par uploads/theme/theme.css, chargé APRÈS cette
   feuille, qui ne redéclare que ce qui a été changé.

   Ce qui est « dérivé » (teinte claire, nuance foncée, couleurs des
   éléments) est écrit avec var() et color-mix() : changer la couleur
   de marque suffit à tout recalculer, sans JavaScript.

   Chargée aussi après styles.css : les noms communs (--bg, --r, --r2,
   --red, --pill) prennent ici leur valeur Synétiq. Les anciens noms
   (--blue, --text, --muted…) sont raccordés plus bas.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ── Marque ── */
  --syn:#6d28d9;                                   /* violet Synétiq */
  --synL:#a78bfa;                                  /* second ton (lavande) */
  --synD:color-mix(in srgb,var(--syn) 80%,#000);   /* nuance foncée : titres, survols */
  --synT:color-mix(in srgb,var(--syn) 9%,#fff);    /* teinte claire : fonds actifs */

  /* ── Fonds, surfaces, textes, bordure ── */
  --bg:#f4f6fa; --sf:#ffffff; --sf2:#f8fafc;
  --tx:#12161c;
  --mu:#5f6b7c;              /* 5:1 sur --bg ; l'ancien #697586 n'y faisait que 4,32:1 */
  --bd:#12161c1a;            /* = rgba(18,22,28,.1) */

  /* ── Domaines : par défaut au violet de marque (« Violet uni », comme
        la page Étiquettes). La palette « Domaines distincts » les sépare. ── */
  --cli:var(--syn); --cmd:var(--syn); --liv:var(--syn); --ref:var(--syn); --stk:var(--syn);
  --cliL:color-mix(in srgb,var(--cli) 9%,#fff);
  --cmdL:color-mix(in srgb,var(--cmd) 9%,#fff);
  --livL:color-mix(in srgb,var(--liv) 9%,#fff);
  --refL:color-mix(in srgb,var(--ref) 9%,#fff);
  --stkL:color-mix(in srgb,var(--stk) 9%,#fff);

  /* ── États : ne suivent jamais la marque (un succès reste vert) ── */
  --ok:#15803d; --amb:#b45309; --red:#b91c1c;
  --okL:color-mix(in srgb,var(--ok) 9%,#fff);
  --ambL:color-mix(in srgb,var(--amb) 10%,#fff);
  --redL:color-mix(in srgb,var(--red) 9%,#fff);

  /* ── Éléments : « auto » = suivent la marque ── */
  --e-barre:var(--sf);  --e-barre-tx:var(--tx);
  --e-onglet:var(--syn); --e-onglet-tx:#fff;
  --e-bouton:var(--syn); --e-bouton-tx:#fff;
  --e-lien:var(--syn);   --e-focus:var(--syn);
  --e-toast:var(--tx);   --e-toast-tx:#fff;

  /* ── Typographie ── */
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --m:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --fs:14px;           /* taille de base */
  --fw-t:800;          /* graisse des titres */

  /* ── Formes ── */
  --r:10px; --r2:14px; --rb:9px; --pill:999px;
  --fH:42px; --fGap:16px; --fLab:6px;   /* formulaires : hauteur des champs, écart entre champs, libellé → champ */
  --tC:.15s; --tM:.22s; --tL:.32s;      /* animations : courte (survol), moyenne (ouverture), longue (panneau) */
  --eS:cubic-bezier(.2,.8,.3,1);       /* courbe de sortie, celle de Synétiq (etq2.css), pour tout le site */
  --ombre:1;           /* 0 = à plat, 1 = Synétiq, 2 = marquées */
  --sh:0 4px 16px rgba(2,6,23,calc(.06 * var(--ombre)));
  --sh2:0 14px 38px rgba(2,6,23,calc(.13 * var(--ombre)));

  /* ── Raccord des anciens noms de styles.css ── */
  --surface:var(--sf); --surface2:var(--sf2);
  --text:var(--tx); --muted:var(--mu); --border:var(--bd);
  --blue:var(--e-bouton); --blue-dark:var(--synD);
  --green:var(--ok);
  --shadow:var(--sh); --shadow2:var(--sh2);
  --font:var(--f);
}

/* Téléphone : champs de 46 px (cibles tactiles). */
@media (max-width:760px){ :root{ --fH:46px; } }

/* Les liens et l'anneau de focus suivent leurs éléments. */
:focus-visible{ outline-color:var(--e-focus); }