/* ==========================================================================
   VTCPass — tokens du design system « La route jusqu'au jour J »
   Palette de la signalisation routière française. L'ambre est réservé au
   risque d'élimination : il n'est utilisé pour rien d'autre.
   ========================================================================== */

@font-face {
  font-family: "Overpass";
  src: url("../fonts/overpass-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("../fonts/overpass-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("../fonts/noto-kufi-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("../fonts/noto-kufi-arabic-arabic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011;
}

:root {
  /* Palette de référence (§8) */
  --asphalte: #1B2430;
  --bitume-clair: #EEF1F4;
  --bleu-autoroute: #1D4E9E;
  --vert-direction: #0F7A50;
  --ambre-chantier: #F2A900;
  --rouge-interdiction: #C8102E;
  --blanc-panneau: #FFFFFF;

  /* Dérivés (bordures, textes secondaires) */
  --gris-glissiere: #5B6676;      /* texte secondaire : 5,1:1 sur bitume clair, 5,8:1 sur blanc */
  --gris-ligne: #C9D1DA;
  --bleu-autoroute-fonce: #163C7A;

  /* Rôles sémantiques — thème clair */
  --fond: var(--bitume-clair);
  --surface: var(--blanc-panneau);
  --texte: var(--asphalte);
  --texte-doux: var(--gris-glissiere);
  --ligne: var(--gris-ligne);
  --marque: var(--bleu-autoroute);
  --marque-survol: var(--bleu-autoroute-fonce);
  --sur-marque: var(--blanc-panneau);
  --lien: var(--bleu-autoroute);
  --succes: var(--vert-direction);
  --risque: var(--ambre-chantier);
  --sur-risque: var(--asphalte);  /* texte sur fond ambre : 9,4:1 */
  --danger: var(--rouge-interdiction);
  --focus: var(--bleu-autoroute);
  --focus-anneau: var(--blanc-panneau);
  --ombre: 0 1px 0 rgba(27, 36, 48, .08), 0 2px 6px rgba(27, 36, 48, .06);

  /* Typographie — échelle 1,25, base 17 px */
  --police-titre: "Overpass", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --police-arabe: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --t-0: 1.0625rem;   /* 17 px */
  --t-1: 1.328rem;    /* 21,25 px */
  --t-2: 1.66rem;     /* 26,6 px */
  --t-3: 2.075rem;    /* 33,2 px */
  --t-4: 2.594rem;    /* 41,5 px */
  --t-5: 3.242rem;    /* 51,9 px */
  --t-moins-1: .875rem; /* 14 px : mentions uniquement, jamais pour du texte courant */
  --interligne: 1.55;
  --interligne-ar: 1.8;
  --mesure: 70ch;

  /* Espacements (base 4 px) */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;

  /* Rayons (§8) */
  --r-panneau: 6px;
  --r-bouton: 10px;
  --r-feuille: 16px;

  /* Cibles tactiles */
  --cible: 44px;
  --cible-confort: 52px;

  --largeur-page: 72rem;
  --duree: 180ms;

  color-scheme: light;
}

/* Mode « conduite de nuit » : automatique selon le système, ou forcé par l'utilisateur. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: var(--asphalte);
    --surface: #243041;
    --texte: var(--bitume-clair);
    --texte-doux: #AEB8C6;
    --ligne: #3A4759;
    --marque: #3C6FC4;
    --marque-survol: #2F5FAF;
    --lien: #9DBDF2;
    --succes: #3FBF87;
    --danger: #FF6B7D;
    --focus: #9DBDF2;
    --focus-anneau: var(--asphalte);
    --ombre: 0 1px 0 rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="nuit"] {
  --fond: var(--asphalte);
  --surface: #243041;
  --texte: var(--bitume-clair);
  --texte-doux: #AEB8C6;
  --ligne: #3A4759;
  --marque: #3C6FC4;
  --marque-survol: #2F5FAF;
  --lien: #9DBDF2;
  --succes: #3FBF87;
  --danger: #FF6B7D;
  --focus: #9DBDF2;
  --focus-anneau: var(--asphalte);
  --ombre: 0 1px 0 rgba(0, 0, 0, .3);
  color-scheme: dark;
}