/* ================================================================
   ZaZa — Variables CSS par thème
   Appliquées sur html[data-theme="x"]
   Toutes les variables --zz-* sont héritées par l'ensemble du DOM.
   ----------------------------------------------------------------
   Chaque thème est une DÉCLINAISON de la charte (zaza-brand.css) :
   son accent est toujours pris dans la palette --z-*, jamais inventé.
   Les clés de thème (a→e) sont INCHANGÉES : le réglage sauvegardé
   des utilisateurs (localStorage 'zaza_theme') reste valide.

   Contrat de nommage :
     --zz-accent      accent de marque du thème
     --zz-on-accent   couleur de TEXTE posée SUR l'accent (≥ 4.5:1)
     --zz-yellow*     ALIAS historiques de --zz-accent. Le nom ment
                      désormais (l'accent n'est plus jaune) mais il est
                      conservé pour ne pas toucher les ~200 usages
                      existants. À retirer progressivement.
   ================================================================ */

/* ── THÈME A : Nuit (défaut) — encre + accent bleu ──────────────── */
[data-theme="a"],
:root {
  --zz-accent:      var(--z-blue-lt);
  --zz-accent-dim:  rgba(74,144,240,.16);
  --zz-accent-dark: var(--z-blue);
  --zz-on-accent:   var(--z-ink);
  --zz-accent-rgb:  var(--z-blue-lt-rgb);

  --zz-black:       var(--z-ink-900);
  --zz-dark:        var(--z-ink-800);
  --zz-card:        var(--z-ink-700);
  --zz-card2:       var(--z-ink-600);
  --zz-border:      var(--z-ink-500);
  --zz-white:       #FFFFFF;
  --zz-dim:         #9FB0C8;
  --zz-muted:       #63748D;
  --app-bg:         var(--z-ink-900);
  --app-text:       #FFFFFF;
  --zz-nav-bg:      var(--z-ink-800);
  --zz-nav-shadow:  rgba(0,0,0,.5);
}

/* ── THÈME B : Jour — clair + accent bleu ───────────────────────── */
[data-theme="b"] {
  --zz-accent:      var(--z-blue);
  --zz-accent-dim:  rgba(10,79,196,.10);
  --zz-accent-dark: var(--z-blue-dk);
  --zz-on-accent:   #FFFFFF;
  --zz-accent-rgb:  var(--z-blue-rgb);

  --zz-black:       #F5F6FA;       /* fond clair */
  --zz-dark:        #E9EDF5;
  --zz-card:        #FFFFFF;
  --zz-card2:       #F0F3FA;
  --zz-border:      #DDE3EE;
  --zz-white:       var(--z-ink);  /* texte sombre */
  --zz-dim:         #5A6B85;
  --zz-muted:       #93A0B5;
  --app-bg:         #F5F6FA;
  --app-text:       var(--z-ink);
  --zz-nav-bg:      #FFFFFF;
  --zz-nav-shadow:  rgba(14,32,56,.12);
}

/* ── THÈME C : Océan — encre profonde + accent cyan ─────────────── */
[data-theme="c"] {
  --zz-accent:      var(--z-cyan-lt);
  --zz-accent-dim:  rgba(53,180,230,.16);
  --zz-accent-dark: var(--z-cyan);
  --zz-on-accent:   var(--z-ink);
  --zz-accent-rgb:  var(--z-cyan-lt-rgb);

  --zz-black:       #050C18;
  --zz-dark:        #081426;
  --zz-card:        #0B1C33;
  --zz-card2:       #102845;
  --zz-border:      rgba(53,180,230,.20);
  --zz-white:       #FFFFFF;
  --zz-dim:         rgba(255,255,255,.60);
  --zz-muted:       rgba(255,255,255,.34);
  --app-bg:         #050C18;
  --app-text:       #FFFFFF;
  --zz-nav-bg:      #0B1C33;
  --zz-nav-shadow:  rgba(0,0,0,.5);
}

/* ── THÈME D : Congo — clair menthe + accent vert ───────────────── */
[data-theme="d"] {
  --zz-accent:      var(--z-green-dk);   /* --z-green est trop clair
                                            sur fond menthe (3.2:1) */
  --zz-accent-dim:  rgba(25,122,56,.12);
  --zz-accent-dark: #0F5A2A;
  --zz-on-accent:   #FFFFFF;
  --zz-accent-rgb:  var(--z-green-dk-rgb);

  --zz-black:       #F0FAF2;       /* fond menthe */
  --zz-dark:        #E4F3E8;
  --zz-card:        #FFFFFF;
  --zz-card2:       #F0FAF2;
  --zz-border:      #C9E6D3;
  --zz-white:       #0D2410;       /* texte vert très foncé */
  --zz-dim:         #56705C;
  --zz-muted:       #9CB3A2;
  --app-bg:         #F0FAF2;
  --app-text:       #0D2410;
  --zz-nav-bg:      #FFFFFF;
  --zz-nav-shadow:  rgba(13,36,16,.12);
}

/* ── THÈME E : Aurora — nuit profonde + accent jaune ────────────── */
[data-theme="e"] {
  --zz-accent:      var(--z-yellow);
  --zz-accent-dim:  rgba(255,196,0,.14);
  --zz-accent-dark: #C9A20E;
  --zz-on-accent:   var(--z-ink);
  --zz-accent-rgb:  var(--z-yellow-rgb);

  --zz-black:       #04080F;
  --zz-dark:        #070D18;
  --zz-card:        rgba(255,255,255,.06);
  --zz-card2:       rgba(255,255,255,.09);
  --zz-border:      rgba(255,255,255,.12);
  --zz-white:       #FFFFFF;
  --zz-dim:         rgba(255,255,255,.58);
  --zz-muted:       rgba(255,255,255,.32);
  --app-bg:         #04080F;
  --app-text:       #FFFFFF;
  --zz-nav-bg:      #070D18;
  --zz-nav-shadow:  rgba(0,0,0,.55);
}

/* ── Alias de compatibilité ─────────────────────────────────────
   Rebranche les ~200 usages historiques de --zz-yellow* sur l'accent
   du thème courant. Défini APRÈS les thèmes pour hériter de la valeur
   résolue, et sur :root pour couvrir tous les data-theme.           */
:root {
  --zz-yellow:      var(--zz-accent);
  --zz-yellow-dim:  var(--zz-accent-dim);
  --zz-yellow-dark: var(--zz-accent-dark);

  /* --zz-text : nom de token utilisé côté CHAUFFEUR pour la couleur de
     texte. Côté passager ce rôle est tenu par --zz-white (nom trompeur
     hérité). On définit l'alias pour (a) réparer ComptePage.razor qui le
     consommait sans qu'il existe — le repli #eee devenait illisible sur
     les thèmes clairs — et (b) converger vers un vocabulaire commun. */
  --zz-text:        var(--zz-white);
}

/* ── Fond du body suit le thème ─────────────────────────────────── */
html[data-theme="b"] body,
html[data-theme="d"] body {
  background: var(--zz-black);
  color: var(--zz-white);
}