/* AUNL Informatique : tokens du design system v2 (option 4, validée le 2026-11-03).
   Couche 1 : primitifs. Couche 2 : sémantique. Les composants n'utilisent que la couche 2. */
:root {
  /* Primitifs */
  --p-encre: #100F0D;   /* noir du logo, mesuré sur le PNG */
  --p-gris-700: #5B5E66;
  --p-gris-500: #8A8D94;
  --p-gris-200: #E3E5E8;
  --p-gris-100: #F3F4F6;
  --p-blanc: #FFFFFF;
  --p-gris-300-sur-encre: #C2C5CB;
  --p-orange-500: #FE7E00;   /* orange du logo, mesuré sur le PNG */
  --p-orange-600: #F27600;
  --p-orange-800: #9A4600;
  --p-rouge-700: #B3261E;
  --p-vert-800: #1E6B3A;

  /* Sémantique : couleur */
  --texte-principal: var(--p-encre);
  --texte-secondaire: var(--p-gris-700);
  --texte-accent: var(--p-orange-800);
  --texte-inverse: var(--p-blanc);
  --texte-inverse-secondaire: var(--p-gris-300-sur-encre);
  --texte-erreur: var(--p-rouge-700);
  --texte-succes: var(--p-vert-800);
  --surface-page: var(--p-blanc);
  --surface-douce: var(--p-gris-100);
  --surface-inverse: var(--p-encre);
  --action-fond: var(--p-orange-500);
  --action-fond-survol: var(--p-orange-600);
  --action-texte: var(--p-encre);
  --bordure-controle: var(--p-gris-500);
  --filet: var(--p-gris-200);
  --etiquette-fond: var(--p-orange-500);
  --etiquette-texte: var(--p-encre);
  --focus: var(--p-encre);

  /* Sémantique : typographie */
  --font-titre: "Schibsted Grotesk", system-ui, sans-serif;
  --font-texte: "Hanken Grotesk", system-ui, sans-serif;
  --fs-h1: clamp(32px, calc(22px + 2.6vw), 56px);
  --fs-h2: clamp(26px, calc(20px + 1.4vw), 40px);
  --fs-h3: 19px;
  --fs-question: 22px;
  --fs-chapo: 17px;
  --fs-corps: 16px;
  --fs-legende: 14px;
  --fs-etiquette: 13px;

  /* Sémantique : espace, forme, profondeur, couches */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --section-y: 56px;
  --gouttiere: 16px;
  --rayon: 12px;
  --ombre-panneau: 0 12px 32px rgba(16, 15, 13, .08);
  --z-collant: 100; --z-barre: 200; --z-voile: 300; --z-panneau: 400; --z-message: 500;

  /* Sémantique : mouvement (voir 05-SPEC-MOTION.md) */
  --ease-sortie: cubic-bezier(.25, 1, .5, 1);
  --ease-decide: cubic-bezier(.16, 1, .3, 1);
  --d-instant: 120ms; --d-etat: 200ms; --d-layout: 300ms; --d-entree: 700ms;
}
@media (min-width: 1024px) {
  :root { --section-y: 96px; --gouttiere: 32px; --fs-chapo: 18px; --fs-corps: 17px; }
}

/* Révision v2.1 (2026-11-04) : le blanc est réservé au « papier » (devis, attestation, formulaire).
   Le fond de page est gris, les grandes sections alternent gris et encre. */
:root {
  --p-gris-150: #E8E9EC;
  --p-gris-250: #D9DBDF;
  --p-gris-300: #C4C7CD;
  --p-encre-700: #24231F;
  --p-encre-500: #3A3935;

  --surface-fond: var(--p-gris-150);
  --surface-fond-2: var(--p-gris-250);
  --surface-inverse-2: var(--p-encre-700);
  --filet-sur-fond: var(--p-gris-300);
  --filet-inverse: var(--p-encre-500);
  --bordure-controle-inverse: var(--p-gris-500);
  --texte-accent-inverse: var(--p-orange-500);
}