/* ─────────────────────────────────────────────────────────────
   TOKENS — la charte de l’app. Tout le reste s’appuie dessus.
   Modifie une valeur ici, elle change partout.
   ───────────────────────────────────────────────────────────── */
:root{
  /* Palette bleu · blanc · rouge */
  --bleu-950:#070E36;
  --bleu-900:#0B1650;
  --bleu-800:#13227A;
  --bleu-600:#1F3BB3;
  --bleu-400:#5B78F0;
  --bleu-100:#E4E9FB;
  --blanc:#FFFFFF;
  --blanc-50:#F4F6FB;
  --argent:#C8CFDD;
  --rouge-700:#A9142A;
  --rouge-600:#D7263D;
  --rouge-400:#FF5468;
  --vert:#14935A;            /* bonne réponse au quiz */
  --gris-bleu-300:#A9B3DE;   /* Figma blue-grey/300 : bouton « améliorer » désactivé */
  --gris-bleu-600:#4F5A86;   /* Figma blue-grey/600 : étiquette du nombre d’exemplaires (collection) */

  /* Rôles (mode clair) */
  --bg:var(--blanc-50);
  --surface:var(--blanc);
  --surface-2:var(--bleu-100);
  --ink:var(--bleu-900);
  --muted:#4F5A86;
  --line:#D5DBF0;
  --primary:var(--rouge-600);
  --primary-press:var(--rouge-700);
  --accent:var(--bleu-600);
  --stage:radial-gradient(120% 90% at 50% 30%, var(--bleu-600) 0%, var(--bleu-900) 62%, var(--bleu-950) 100%);
  --tabbar:var(--blanc);

  /* Typographies (Figma : font-family/*) — 3 polices seulement :
     titres en Bricolage Grotesque ExtraBold resserrée, textes en Public Sans, nom de famille des cartes en Spectral */
  --font-title:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-card-name:"Spectral",Georgia,serif;
  --title-tracking:-.02em;   /* titres ≥ 24 px ; -.01em en dessous */

  --black:#000000;           /* utilisé en transparence (ombres, voiles) */

  /* Or — rareté gold, extrêmement rare (Figma : gold/*, color/rarity/gold) */
  --gold-100:#FFF4C2;
  --gold-300:#F2D375;
  --gold-500:#D4A72C;
  --gold-700:#8F6B12;
  --rarity-gold:var(--gold-500);

  /* Holographique — traits du dos de carte (Figma : style gradient/holo, arrêts liés à
     silver/300 · blue/400 · white/50 · red/400 · gold/300). Le fond du dos = --stage (Figma : gradient/card-back) */
  --holo:linear-gradient(125deg, var(--argent) 0%, var(--bleu-400) 25%, var(--blanc-50) 50%, var(--rouge-400) 72%, var(--gold-300) 86%, var(--argent) 100%);

  /* Graisses (Figma : font-weight/*) */
  --font-weight-light:300;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semi-bold:600;
  --font-weight-bold:700;
  --font-weight-extra-bold:800;

  /* Formes (Figma : radius/*) — grille de 4 px */
  --radius-xs:4px;
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --radius-card:16px;        /* cartes 300 × 480 */
  /* Espacements (Figma : spacing/*) — multiples de 4, plus 2 et 6 pour les cartes */
  --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px; --space-12:12px; --space-16:16px;
  --space-20:20px; --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px;
  /* Fond de la fenêtre portrait (Figma : card/cell/bkg-frame-*), en px de la maquette 300 × 480 :
     arrondi à gauche (rayon), pans coupés au centre et à droite, angle droit à l’extrême droite ;
     au centre, les sommets des pans coupés sont légèrement arrondis (Figma : radius/s sur la forme) */
  --bkg-round-far-left:24; --bkg-round-left:12;
  --bkg-cut-center:15.5; --bkg-cut-right:12; --bkg-cut-round-center:12;
  --card-w:300px;
  --card-h:480px;
  --tabbar-h:70px;   /* hauteur de la barre d’onglets (icône 26 + libellé + repère + marges) */
  --bas-securite:env(safe-area-inset-bottom,0px);   /* zone du geste d’accueil de l’iPhone */
  --tabbar-total:calc(var(--tabbar-h) + var(--bas-securite));

  /* Couleurs des cartes par parti (Figma : party/<id>) */
  --party-arthaud:#8C1616;  --party-melenchon:#D02B2B; --party-roussel:#B21F24;   --party-ruffin:#E8463A;
  --party-tondelier:#22874F;--party-batho:#5B9A2C;     --party-glucksmann:#D63A77;--party-bouamrane:#E56A9E;
  --party-cazeneuve:#A0489A;--party-riner:#4F72B8;--party-polony:#00A2B0;--party-attal:#4A9EDE;     --party-philippe:#1C84B9;  --party-bertrand:#3769AE;
  --party-lisnard:#2B4E9B;  --party-asselineau:#3A5884;--party-retailleau:#174C9C;--party-nda:#1C3A6C;
  --party-philippot:#2B4575;--party-lepen:#13305A;     --party-zemmour:#22304E;

  /* Ombre douce des éléments cliquables (Figma : shadow/clickable, 14/11/2026) */
  --shadow-clickable:0 1px 2px rgba(7,14,54,.06),0 4px 12px -2px rgba(7,14,54,.08);

  color-scheme:light;
}

/* Mode sombre automatique */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--bleu-950);
    --surface:#101B5E;
    --surface-2:#18267A;
    --ink:var(--blanc-50);
    --muted:#A9B3DE;
    --line:#22307F;
    --tabbar:#0D1752;
    --accent:var(--bleu-400);
    --shadow-clickable:0 1px 2px rgba(0,0,0,.25),0 4px 12px -2px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--bleu-950);
  --surface:#101B5E;
  --surface-2:#18267A;
  --ink:var(--blanc-50);
  --muted:#A9B3DE;
  --line:#22307F;
  --tabbar:#0D1752;
  --accent:var(--bleu-400);
  --shadow-clickable:0 1px 2px rgba(0,0,0,.25),0 4px 12px -2px rgba(0,0,0,.35);
  color-scheme:dark;
}