/* Jetons de style — 1-signature
   Réf. docs/specifications.md §12.

   Parti pris : la ligne de métro. La couleur de marque est le turquoise du
   ticket de métro parisien — la référence est française, immédiatement
   lisible, et elle porte la ligne comme le ticket portait le trajet.

   Elle se tient en deux crans, et ce n'est pas une coquetterie. Le turquoise
   du ticket, relevé à #00C6D3, ne donne que 2,01 contre le fond de page : un
   anneau de cette couleur s'y délave. Il est donc la marque du **thème
   sombre**, où il donne 8,83, et le thème clair prend #007D8A — même famille,
   4,68 contre le papier et 4,88 sous du texte blanc.

   Elle reste distincte de l'indigo Goodflag, qui est la couleur du prestataire
   et non la nôtre ; elle en frôle en revanche l'accent turquoise. C'est assumé
   depuis le 30/09/2026 : l'indigo suffit à distinguer les deux marques.

   L'accent est l'or de l'étoile — la monnaie du site (§12.1). Il ne sert
   qu'à elle : le dessin de l'étoile, l'aplat d'un solde, le terminus du logo.
   Posé ailleurs, il viderait le signe de son sens.

   Cet or ne porte jamais de texte sur fond clair : son contraste ne le permet
   pas. Quand un solde doit se lire, c'est le chiffre qui reste en encre et
   l'étoile qui est en or. */

:root {
  color-scheme: light dark;

  /* --- Marque --- */
  --brand: #007D8A;           /* turquoise, cran foncé : porte du texte blanc */
  --brand-deep: #005C66;      /* survol */
  --brand-bright: #00C6D3;    /* le ticket de métro, pour les aplats et le sombre */
  /* Le texte qui se pose SUR « --brand ». Blanc ici, encre en thème sombre où
     la marque est claire : sans ce jeton, le bouton du thème sombre gardait du
     blanc sur du turquoise, soit 2,10 — il était déjà à 3,25 avant ce
     changement, sous le seuil, et personne ne l'avait vu. */
  --on-brand: #FFFFFF;
  --star: #D99A0B;            /* or de l'étoile : le dessin, jamais le texte */
  --star-soft: #FBEFD0;       /* son aplat, pour les fonds de solde */
  --star-ink: #4A3402;        /* le texte qui se pose sur --star-soft */
  --accent: var(--star);
  --accent-soft: var(--star-soft);

  /* --- Lignes : une couleur par niveau de signature (§12.1) ---
     Choisies pour rester distinguables entre elles et lisibles sur fond clair
     comme sur fond sombre. */
  --line-1: #007D8A;   /* simple / OTP e-mail — la ligne de la marque */
  --line-2: #0072CE;   /* simple / OTP SMS */
  --line-3: #E4572E;   /* avancé / FranceConnect */
  --line-4: #7B4EA8;   /* avancé / OTP SMS */
  --line-5: #C2185B;   /* qualifié / France Identité */
  --line-6: #2E7D32;   /* qualifié / La Poste — reprend le vert que la marque libère */

  /* --- Thème clair --- */
  --bg: #FBFAF7;              /* blanc cassé, chaud */
  --panel: #FFFFFF;
  --panel-alt: #F1F4F2;
  --ink: #16241F;
  --muted: #5B6B65;
  --line: #E0E6E3;
  --link: var(--brand);

  /* --- Sémantique --- */
  --ok: #0C6B4F;
  --warn: #9A6206;
  --danger: #B3261E;
  --info: #0072CE;

  /* --- Typographie (§12.2) --- */
  --font-display: "Outfit", "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Satoshi", "Segoe UI", Roboto, Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* --- Rythme --- */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 12px 30px -20px rgba(0, 125, 138, .35);
  --maxw: 820px;              /* une seule colonne : le parcours reste linéaire */
  --gutter: clamp(18px, 5vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1512;
    --panel: #16211D;
    --panel-alt: #1D2A25;
    --ink: #E8EFEB;
    --muted: #9BAFA8;
    --line: #26352F;
    --link: #00C6D3;
    --brand: #00C6D3;
    --brand-deep: #4FDCE8;
    --brand-bright: #66E6F0;
    --on-brand: #0E1512;
    --shadow: 0 12px 30px -20px rgba(0, 0, 0, .7);
    --line-1: #00C6D3;
    --line-2: #4FA8F5;
    --line-3: #F2845C;
    --line-4: #A986D6;
    --line-5: #E56091;
    --line-6: #5CB860;
    --star: #F2B824;
    --star-soft: #2C2413;
    --star-ink: #F7E2A8;
  }
}

:root[data-theme="dark"] {
  --bg: #0E1512;
  --panel: #16211D;
  --panel-alt: #1D2A25;
  --ink: #E8EFEB;
  --muted: #9BAFA8;
  --line: #26352F;
  --link: #00C6D3;
  --brand: #00C6D3;
  --brand-deep: #4FDCE8;
  --brand-bright: #66E6F0;
  --on-brand: #0E1512;
  --shadow: 0 12px 30px -20px rgba(0, 0, 0, .7);
  --line-1: #00C6D3;
  --line-2: #4FA8F5;
  --line-3: #F2845C;
  --line-4: #A986D6;
  --line-5: #E56091;
  --line-6: #5CB860;
  --star: #F2B824;
  --star-soft: #2C2413;
  --star-ink: #F7E2A8;
}