/* tokens.css — Variables du design system, direction A « Encre et papier ».
   Couleurs, typographie, espacements, rayons, ombres, dimensions et z-index.
   Aucune valeur en dur ne doit apparaître ailleurs que dans ce fichier. */

:root {
  /* Couleurs : fond et surfaces */
  --couleur-fond: #EFF0EE;
  --couleur-surface: #FFFFFF;
  --couleur-surface-2: #F6F6F4;
  --couleur-bordure: #D2D4D0;
  --couleur-bordure-forte: #1B1D1B;
  --couleur-voile: rgba(27, 29, 27, 0.45);

  /* Couleurs : texte */
  --couleur-texte: #1B1D1B;
  --couleur-texte-2: #5F645F;
  --couleur-texte-3: #767C76;
  --couleur-texte-inverse: #FFFFFF;

  /* Couleurs : primaire, actions humaines */
  --couleur-primaire: #223A52;
  --couleur-primaire-survol: #1A2E42;
  --couleur-primaire-actif: #142536;
  --couleur-primaire-teinte: #E4E9EF;
  --couleur-primaire-bordure: #B9C5D2;

  /* Couleurs : accent, tout ce qui vient de l'agent IA */
  --couleur-accent: #7A4A72;
  --couleur-accent-survol: #653C5E;
  --couleur-accent-teinte: #F2EAF1;
  --couleur-accent-bordure: #D6C2D3;

  /* Couleurs : sémantiques */
  --couleur-succes: #2C7A47;
  --couleur-succes-teinte: #E3F0E7;
  --couleur-attention: #A86400;
  --couleur-attention-teinte: #F8EEDC;
  --couleur-erreur: #B3261E;
  --couleur-erreur-survol: #921C15;
  --couleur-erreur-teinte: #F8E4E2;

  /* Couleurs : focus clavier */
  --couleur-focus: #223A52;

  /* Couleurs des réseaux : réservées aux badges d'identification */
  --reseau-instagram: #E1306C;
  --reseau-facebook: #1877F2;
  --reseau-linkedin: #0A66C2;
  --reseau-google: #4285F4;

  /* Séries de graphiques : ordre fixe, validé pour les daltonismes (série 1 Instagram, 2 Facebook, 3 LinkedIn) */
  --graphique-1: #2F6A9C;
  --graphique-2: #D08A2E;
  --graphique-3: #A0588F;
  --graphique-1-teinte: #E3ECF4;

  /* Placeholders d'images */
  --visuel-1: #DCE3D8;
  --visuel-2: #E5DED2;
  --visuel-3: #D7DDE4;
  --visuel-4: #E6DDE4;
  --visuel-trait: rgba(27, 29, 27, 0.28);

  /* Typographie : familles */
  --police-titres: "Newsreader", Georgia, "Times New Roman", serif;
  --police-texte: "Public Sans", "Helvetica Neue", Helvetica, sans-serif;

  /* Typographie : tailles */
  --taille-12: 12px;
  --taille-13: 13px;
  --taille-14: 14px;
  --taille-15: 15px;
  --taille-17: 17px;
  --taille-20: 20px;
  --taille-26: 26px;
  --taille-34: 34px;
  --taille-40: 40px;

  /* Typographie : interlignages */
  --interligne-12: 16px;
  --interligne-13: 20px;
  --interligne-14: 20px;
  --interligne-15: 24px;
  --interligne-17: 24px;
  --interligne-20: 28px;
  --interligne-26: 34px;
  --interligne-34: 40px;
  --interligne-40: 48px;

  /* Typographie : graisses */
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-demi: 600;

  /* Espacements */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --esp-16: 64px;

  /* Rayons : un rayon par famille d'objet */
  --rayon-xs: 2px;
  --rayon-sm: 4px;
  --rayon-md: 8px;
  --rayon-pill: 999px;

  /* Ombres : réservées aux couches flottantes */
  --ombre-flottante: 0 4px 16px rgba(27, 29, 27, 0.12), 0 0 0 1px var(--couleur-bordure);
  --ombre-modale: 0 16px 48px rgba(27, 29, 27, 0.24);

  /* Dimensions */
  --largeur-nav: 240px;
  --hauteur-barre: 56px;
  --largeur-contenu-max: 1280px;
  --hauteur-controle: 36px;
  --hauteur-controle-sm: 28px;
  --largeur-panneau-lateral: 360px;

  /* Épaisseurs */
  --trait: 1px;
  --trait-fort: 2px;

  /* Z-index */
  --z-base: 0;
  --z-collant: 100;
  --z-deroulant: 200;
  --z-panneau: 300;
  --z-modale: 400;
  --z-toast: 500;

  /* Mouvement */
  --duree-rapide: 120ms;
  --duree-normale: 200ms;
  --courbe: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-rapide: 0ms;
    --duree-normale: 0ms;
  }
}