/* ============================================================
   TAXI COTILLEAU, jetons de conception.
   Aucune valeur de couleur, d'espace ou de durée ne doit être
   écrite en dur dans un écran : tout passe par ces variables.
   Les valeurs de marque sont celles du site taxi-cotilleau.fr.
   ============================================================ */

:root {
  /* ---- Typographies (fichiers locaux, voir assets/fonts/fonts.css) ---- */
  --police-titre: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --police-texte: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --police-chiffre: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---- Échelle de texte. En rem : suit la taille système jusqu'à 200 % ---- */
  --t-xs: 0.75rem;    /* 12px : étiquettes */
  --t-s: 0.8125rem;   /* 13px : mentions */
  --t-m: 0.9375rem;   /* 15px : texte courant */
  --t-l: 1.0625rem;   /* 17px : texte important */
  --t-xl: 1.375rem;   /* 22px : titre d'écran */
  --t-xxl: 2rem;      /* 32px : montant, heure de départ */
  --t-geant: 2.75rem; /* 44px : prix annoncé */

  /* ---- Espacement, échelle de 4 ---- */
  --e0: 2px;  --e1: 4px;  --e2: 8px;   --e3: 12px;
  --e4: 16px; --e5: 24px; --e6: 32px;  --e7: 48px; --e8: 64px;

  /* ---- Rayons ---- */
  --r-s: 10px; --r-m: 18px; --r-l: 26px; --r-rond: 999px;

  /* ---- Cibles tactiles : 48 dp Android, au-dessus des 44 pt iOS ---- */
  --cible: 48px;
  --cible-min: 44px;
  --ecart-cible: 8px;

  /* ---- Durées et courbe. Rien au-dessus de 300 ms ---- */
  --d-court: 120ms;
  --d-moyen: 220ms;
  --d-long: 300ms;
  --courbe: cubic-bezier(.2,.7,.1,1);

  /* ---- Profondeur ---- */
  --z-contenu: 1; --z-barre: 40; --z-feuille: 60; --z-message: 80;

  /* ---- Largeur de lecture ---- */
  --largeur: 760px;
  --marge: clamp(16px, 4vw, 28px);
}

/* ---- Thème sombre, celui par défaut : Tom travaille de nuit ---- */
:root, [data-theme="sombre"] {
  --fond: #0c0c0d;
  --fond-rgb: 12,12,13;
  --surface: #151517;
  --surface-2: #1d1d21;
  --texte: #f2ede4;      /* 16,8:1 sur le fond */
  --texte-2: #cfc9bf;    /* 11,9:1 */
  --texte-3: #8f8a82;    /* 5,7:1, la limite basse acceptée */
  --ligne: #2a2a2f;
  --ligne-2: #4a4a52;
  --marque: #b5463d;     /* fond de bouton seulement : 3,6:1 en texte, insuffisant */
  --marque-survol: #c75549;
  --sur-marque: #fff8f4; /* 5,1:1 sur la marque */
  --accent: #e2877c;     /* 7,4:1 : c'est lui qui porte le texte de marque */
  --ok: #3ddc84;         /* 11,0:1 */
  --attention: #f0b429;  /* 10,5:1 */
  --danger: #ff6b5e;     /* 7,0:1 */
  --voile: rgba(0,0,0,.66);
  --ombre: 0 24px 60px -24px rgba(0,0,0,.85);
  --ombre-carte: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -18px rgba(0,0,0,.9);
  --ombre-marque: 0 8px 18px -10px rgba(181,70,61,.5);
  --damier-sombre: #151515;
  /* Fonds teintés des états : le texte garde son contraste, la couleur ne
     porte jamais l'information seule (le mot est toujours écrit). */
  --fond-ok: rgba(61,220,132,.12);
  --fond-attention: rgba(240,180,41,.13);
  --fond-danger: rgba(255,107,94,.13);
  --fond-accent: rgba(226,135,124,.13);
  --fond-neutre: rgba(242,237,228,.06);
  /* Lueur de marque derrière l'en-tête, très diffuse. */
  --lueur: radial-gradient(120% 90% at 85% -10%, rgba(181,70,61,.34), transparent 62%);
  --carte-haut: rgba(255,255,255,.028);
  color-scheme: dark;
}

/* ---- Thème clair : plein soleil, pare-brise, fin de mois à l'ordinateur ---- */
[data-theme="clair"] {
  --fond: #f7f4ef;
  --fond-rgb: 247,244,239;
  --surface: #ffffff;
  --surface-2: #f2ede6;
  --texte: #161515;      /* 16,6:1 */
  --texte-2: #45413c;    /* 9,2:1 */
  --texte-3: #6f685e;    /* 5,0:1 */
  --ligne: #e3dccf;
  --ligne-2: #c6bdad;
  --marque: #a43c33;     /* 5,9:1 : utilisable en texte dans ce thème */
  --marque-survol: #8f3229;
  --sur-marque: #fff8f4; /* 6,1:1 */
  --accent: #8f3229;     /* 7,2:1 */
  --ok: #15713f;         /* 5,5:1 */
  --attention: #8a5600;  /* 5,6:1 */
  --danger: #b3261e;     /* 6,0:1 */
  --voile: rgba(30,20,10,.5);
  --ombre: 0 24px 50px -28px rgba(60,40,20,.4);
  --ombre-carte: 0 1px 2px rgba(60,40,20,.05), 0 12px 26px -20px rgba(60,40,20,.35);
  --ombre-marque: 0 10px 24px -12px rgba(164,60,51,.5);
  --damier-sombre: #1a1a1a;
  --fond-ok: rgba(21,113,63,.1);
  --fond-attention: rgba(138,86,0,.1);
  --fond-danger: rgba(179,38,30,.09);
  --fond-accent: rgba(164,60,51,.09);
  --fond-neutre: rgba(22,21,21,.05);
  --lueur: radial-gradient(120% 90% at 85% -10%, rgba(164,60,51,.14), transparent 60%);
  --carte-haut: rgba(255,255,255,.6);
  color-scheme: light;
}

/* Sans choix explicite, on suit le réglage du téléphone. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) {
    --fond: #f7f4ef; --fond-rgb: 247,244,239; --surface: #ffffff; --surface-2: #f2ede6;
    --texte: #161515; --texte-2: #45413c; --texte-3: #6f685e;
    --ligne: #e3dccf; --ligne-2: #c6bdad;
    --marque: #a43c33; --marque-survol: #8f3229; --sur-marque: #fff8f4; --accent: #8f3229;
    --ok: #15713f; --attention: #8a5600; --danger: #b3261e;
    --voile: rgba(30,20,10,.5); --ombre: 0 24px 50px -28px rgba(60,40,20,.4);
    --ombre-carte: 0 1px 2px rgba(60,40,20,.05), 0 12px 26px -20px rgba(60,40,20,.35);
    --ombre-marque: 0 10px 24px -12px rgba(164,60,51,.5);
    --damier-sombre: #1a1a1a;
    --fond-ok: rgba(21,113,63,.1); --fond-attention: rgba(138,86,0,.1);
    --fond-danger: rgba(179,38,30,.09); --fond-accent: rgba(164,60,51,.09);
    --fond-neutre: rgba(22,21,21,.05);
    --lueur: radial-gradient(120% 90% at 85% -10%, rgba(164,60,51,.14), transparent 60%);
    --carte-haut: rgba(255,255,255,.6);
    color-scheme: light;
  }
}

/* « Réduire les animations » est un réglage d'accessibilité, pas une préférence. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-court: 0ms; --d-moyen: 0ms; --d-long: 0ms; }
}