/* =============================================================================
   tokens.css — ACX Fonteray · fondations de la marque
   -----------------------------------------------------------------------------
   Aucune couleur, aucun rayon, aucune ombre ne doit être écrit en dur ailleurs
   que dans ce fichier. ui.css et les pages n'utilisent que des tokens.

   Le site est SOMBRE PAR DÉFAUT : c'est là que le logo historique respire le
   mieux, en gris clair, avec le rouge gardé pour la ligne d'eau et les appels
   à l'action. Le thème clair existe (bascule dans la barre de revue) et reprend
   le rouge d'origine #B23A2B, qui tient 5,9:1 sur le papier.

   Les rapports en commentaire sont CALCULÉS (WCAG 2.1), pas estimés.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Thème sombre — le défaut
   --------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Rouge de marque. Le #B23A2B historique ne tient que 3,19:1 sur le fond
     sombre : réservé aux GRANDS aplats graphiques (jamais du texte). Le rouge
     éclairci ci-dessous est celui du texte, des liens et des boutons. */
  --acx-brand: #D9634E;            /* 5,28:1 sur le fond · 4,88:1 sur la surface */
  --acx-brand-hover: #E8836F;
  --acx-brand-deep: #B23A2B;       /* rouge d'origine — aplats et logo seulement */
  --acx-brand-faint: #2A1512;      /* pastille teintée */
  --acx-on-brand: #0F1214;         /* 5,21:1 sur --acx-brand */

  --acx-bg: #0F1214;
  --acx-bg-deep: #080A0B;          /* pied de page, bandeaux */
  --acx-surface: #171B1E;
  --acx-surface-2: #1E2327;
  --acx-border: #282E33;           /* filet décoratif */
  --acx-border-strong: #454E55;    /* filet des CHAMPS de saisie — 3,05:1 */

  --acx-text: #ECEFF1;             /* 15,3:1 sur le fond */
  --acx-muted: #A0AAB1;            /* 7,9:1 — texte secondaire, admis en courant */
  --acx-faint: #7C868D;            /* 5,0:1 — micro-libellés, jamais < 13 px */

  --acx-ok: #4FBF8B;
  --acx-warn: #E0A756;
  --acx-err: #F08D80;

  /* Le logo est bicolore : encre claire + ligne d'eau rouge. */
  --acx-logo-ink: #DFE4E7;
  --acx-logo-accent: #D9634E;

  /* Bandeau « champ constant » : sombre en clair comme en sombre. */
  --acx-band: #0B0E0F;
  --acx-on-band: #ECEFF1;
  --acx-band-muted: #98A2A9;
}

/* ---------------------------------------------------------------------------
   2. Thème clair — papier, rouge d'origine
   -----------------------------------------------------------------------------
   Le sélecteur porte sur `data-resolved`, pas sur `data-theme` : le premier est
   le thème RÉELLEMENT affiché, le second la PRÉFÉRENCE de l'utilisateur, qui
   vaut « auto » par défaut. C'est acx.js qui résout l'un en l'autre en lisant
   `prefers-color-scheme`, et qui met à jour si le système bascule en cours de
   route. Un seul bloc de couleurs claires : aucune duplication à maintenir.
   --------------------------------------------------------------------------- */

:root[data-resolved="light"] {
  color-scheme: light;

  --acx-brand: #A93520;            /* 5,91:1 sur le fond · 6,56:1 sur le blanc */
  --acx-brand-hover: #8E2A17;
  --acx-brand-deep: #B23A2B;
  --acx-brand-faint: #F5E4E0;
  --acx-on-brand: #FFF7F5;         /* 5,72:1 sur --acx-brand */

  --acx-bg: #F5F3F1;
  --acx-bg-deep: #E9E5E1;
  --acx-surface: #FFFFFF;
  --acx-surface-2: #EDEAE7;
  --acx-border: #DCD8D4;
  --acx-border-strong: #9A948E;    /* 3,10:1 sur le blanc */

  --acx-text: #14181A;             /* 15,1:1 sur le fond */
  --acx-muted: #55606A;            /* 5,79:1 */
  --acx-faint: #626C74;            /* 4,89:1 */

  --acx-ok: #0E7A4F;
  --acx-warn: #8A5A13;
  --acx-err: #A8302A;

  --acx-logo-ink: #2A2F33;
  --acx-logo-accent: #B23A2B;
}

/* ---------------------------------------------------------------------------
   3. Géométrie, typographie, rythme — communs aux deux thèmes
   L'identité est équerrée : le logo n'a pas un seul angle arrondi hors des
   terminaisons de trait. Les rayons restent donc quasi nuls.
   --------------------------------------------------------------------------- */

:root {
  --acx-r-1: 2px;
  --acx-r-2: 3px;
  --acx-r-pill: 999px;

  --acx-s-1: 4px;
  --acx-s-2: 8px;
  --acx-s-3: 12px;
  --acx-s-4: 16px;
  --acx-s-5: 24px;
  --acx-s-6: 32px;
  --acx-s-7: 48px;
  --acx-s-8: 64px;
  --acx-s-9: 96px;
  --acx-s-10: 128px;

  --acx-shell: 1180px;
  --acx-shell-narrow: 760px;

  /* Aucune police n'est chargée depuis le réseau : les maquettes doivent
     s'ouvrir en double-clic, hors ligne. Piles système uniquement. */
  --acx-font: "Segoe UI Variable Text", "Segoe UI", -apple-system,
              BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --acx-font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system,
              BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --acx-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono",
              Consolas, "Liberation Mono", monospace;

  --acx-t-xs: 12px;
  --acx-t-sm: 13.5px;
  --acx-t-base: 16px;
  --acx-t-md: 18px;
  --acx-t-lg: 21px;
  --acx-t-xl: clamp(24px, 3.2vw, 30px);
  --acx-t-2xl: clamp(30px, 4.4vw, 42px);
  --acx-t-3xl: clamp(34px, 5.4vw, 60px);

  --acx-shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
  --acx-shadow-2: 0 18px 40px -22px rgba(0, 0, 0, .75);

  --acx-ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}