/* ============================================================================
   Identité visuelle LogiFlotte.

   Deux couleurs, tirées du logo et de rien d'autre :

     · le magenta du pictogramme — la couleur de marque, celle qui signe. Elle
       est rare par construction : un accent qui apparaît partout ne signale
       plus rien.
     · l'indigo du logotype — la couleur de structure, celle des titres, des
       fonds sombres et des surfaces d'appui.

   Les neutres ne sont pas des gris purs : ils tirent légèrement vers l'indigo.
   Un gris neutre à côté de ces deux teintes paraît sale ; un gris qui partage
   leur température paraît choisi.

   Les couleurs sémantiques (succès, alerte, danger) restent distinctes de la
   couleur de marque. Confondre « c'est LogiFlotte » et « attention » rendrait
   les deux illisibles.
   ============================================================================ */

:root {
  /* ---- Marque -------------------------------------------------------- */
  --lf-magenta:      #a5195b;
  --lf-magenta-vif:  #c41f6d;
  --lf-magenta-sombre: #7d1244;
  --lf-magenta-voile: #fdf2f7;

  --lf-indigo:       #2e2482;
  --lf-indigo-vif:   #3d2fa8;
  --lf-indigo-sombre:#1d1655;
  --lf-indigo-nuit:  #14103c;
  --lf-indigo-voile: #f3f2fb;

  /* ---- Neutres, tirés vers l'indigo ---------------------------------- */
  --lf-encre:        #171529;
  --lf-ardoise:      #55516e;
  --lf-brume:        #8a86a3;
  --lf-nuage:        #e6e4ef;
  --lf-lin:          #f6f5fa;
  --lf-blanc:        #ffffff;

  /* ---- Dégradé de marque --------------------------------------------- */
  /* L'indigo vers le magenta : c'est le trajet visuel du logo lui-même,
     du logotype vers le pictogramme. */
  --lf-degrade: linear-gradient(118deg, var(--lf-indigo) 0%, var(--lf-magenta) 100%);
  --lf-degrade-doux: linear-gradient(118deg, var(--lf-indigo-voile) 0%, var(--lf-magenta-voile) 100%);

  /* ---- Typographie ---------------------------------------------------- */
  /* Le logotype est un géométrique large et monoligne. On s'en approche avec
     une pile système : aucune police distante à charger, donc aucune seconde
     d'attente ni de dépendance à un CDN que la politique de contenu bloque. */
  --lf-titre: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system,
              'Helvetica Neue', Arial, sans-serif;
  --lf-texte: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --lf-mono:  ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Ombres --------------------------------------------------------- */
  /* Teintées d'indigo plutôt que noires : une ombre noire sur un fond coloré
     fait une tache grise. */
  --lf-ombre-1: 0 1px 2px rgb(23 21 41 / .06), 0 1px 3px rgb(23 21 41 / .08);
  --lf-ombre-2: 0 4px 12px rgb(23 21 41 / .08), 0 2px 4px rgb(23 21 41 / .04);
  --lf-ombre-3: 0 12px 32px rgb(23 21 41 / .12), 0 4px 8px rgb(23 21 41 / .06);
  --lf-ombre-marque: 0 10px 30px rgb(165 25 91 / .28);

  /* ---- Rayons --------------------------------------------------------- */
  --lf-r-sm: 8px;
  --lf-r-md: 12px;
  --lf-r-lg: 18px;
  --lf-r-xl: 28px;
}

/* Le pictogramme reprend toujours le magenta, le logotype toujours l'indigo —
   sauf sur fond sombre, où les deux passent en blanc pour rester lisibles. */
.lf-logo { display: inline-flex; align-items: center; gap: .55em; }
.lf-logo__mark { flex: 0 0 auto; display: block; }
.lf-logo__mark .lf-p { fill: var(--lf-magenta); }
.lf-logo__type { fill: var(--lf-indigo); }

.lf-logo--clair .lf-logo__mark .lf-p,
.lf-logo--clair .lf-logo__type { fill: var(--lf-blanc); }

.lf-logo--mono .lf-logo__mark .lf-p,
.lf-logo--mono .lf-logo__type { fill: currentColor; }

/* Logotype composé : géométrique large, lettres espacées, comme le logo. */
.lf-logo__word {
  font-family: var(--lf-titre);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--lf-indigo);
  white-space: nowrap;
}
.lf-logo--clair .lf-logo__word { color: var(--lf-blanc); }
.lf-logo--mono  .lf-logo__word { color: currentColor; }