/* ============================================================================
   TicTask — Design tokens (charte v1 · 2026)
   ----------------------------------------------------------------------------
   POURQUOI cette DA (corps de métier = automatisation / gain de temps, B2C-pro,
   audience peu technophile) :
   - Beaucoup d'air + neutres clairs (~75%) = réassurance, lisibilité, calme.
     Le bleu est RARE (~10% actions, ~15% bleu nuit de structure) donc il marque.
   - Bleu = confiance + efficacité, sans cliché « tech froid » (pas de noir, pas
     de néon, pas de dégradés criards). Ombres BLEUTÉES, jamais noires.
   - Manrope (titres, géométrique mais chaleureux) + Public Sans (corps, pensé
     pour la lisibilité administrative → parfait pour un public non-tech) +
     IBM Plex Mono par petites touches (chiffres, labels = précision).
   - Toutes les valeurs ci-dessous reprennent EXACTEMENT les hex de la charte.
     Les ombres ne sont pas chiffrées dans la charte → dérivées de #0E2348 à
     faible alpha pour rester « bleutées très douces ».
   ========================================================================== */

:root {
  /* ---- Bleus de marque ------------------------------------------------ */
  --bleu: #2C66E0;        /* primaire · actions · liens · symbole          */
  --bleu-nuit: #0E2348;   /* fonds foncés · sections fortes · texte maxi   */
  --bleu-vif: #5B8DEF;    /* GRAPHIQUE only (jamais texte fin sur blanc)   */
  --bleu-ciel: #E9F1FE;   /* fonds doux · highlights · hover · puces       */

  /* ---- Gris froids & neutres ------------------------------------------ */
  --encre: #14233D;       /* texte principal sur clair (AAA · 13:1)        */
  --ardoise: #4B5A72;     /* texte secondaire · paragraphes (AA · 7:1)     */
  --acier: #8794A8;       /* légendes · labels (≥16px)                     */
  --ligne: #DCE3ED;       /* filets · bordures                             */
  --brume: #F1F5FA;       /* fond de page / section                        */
  --voile: #F8FAFD;       /* fond très clair alterné                       */
  --blanc: #FFFFFF;       /* cartes                                        */

  /* Couleur d'état fonctionnel (hors palette de marque, par nécessité UX) :
     le rouge est le signal d'erreur universellement reconnu pour les formulaires.
     À n'utiliser QUE pour les erreurs de saisie, jamais comme couleur de marque. */
  --alerte: #C0392B;

  /* Variantes dérivées (pour états, sur fond foncé) */
  --bleu-fonce: #1F4FC4;          /* hover du bleu primaire                */
  --ligne-nuit: rgba(255,255,255,.12);
  --texte-nuit: #EAF0FB;          /* texte clair sur bleu nuit             */
  --texte-nuit-doux: #AFC0DD;     /* secondaire sur bleu nuit              */

  /* ---- Typographie ---------------------------------------------------- */
  --titre: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;     /* 800 / 700 */
  --texte: "Public Sans", system-ui, -apple-system, Segoe UI, sans-serif; /* 400/500/600 */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Rayons (charte : 8 / 14–22 / 99) ------------------------------- */
  --r-xs: 8px;     /* petits éléments      */
  --r-sm: 14px;    /* cartes (bas de plage) */
  --r-md: 18px;    /* cartes               */
  --r-lg: 22px;    /* grandes cartes       */
  --r-pill: 99px;  /* boutons · puces      */

  /* ---- Ombres bleutées (dérivées de #0E2348 · jamais noir) ------------ */
  --ombre-s: 0 1px 2px rgba(14,35,72,.05), 0 2px 6px rgba(14,35,72,.05);
  --ombre-m: 0 4px 12px rgba(14,35,72,.07), 0 12px 28px rgba(14,35,72,.07);
  --ombre-l: 0 8px 24px rgba(14,35,72,.09), 0 24px 60px rgba(14,35,72,.12);
  --ombre-bleu: 0 8px 24px rgba(44,102,224,.22);   /* halo bleu sur CTA    */

  /* ---- Espacement (grille 8px) ---------------------------------------- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 80px; --sp-8: 96px;

  /* ---- Layout & divers ------------------------------------------------ */
  --maxw: 1180px;
  --maxw-text: 65ch;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 72px;
  --ease: cubic-bezier(.5, .05, .05, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-header: 50;
  --z-menu: 60;
}