/* ============================================================
   PneumoLogiK — Thème "Néon Maîtrisé"
   Sombre raffiné (par défaut) + Mode clair
   ------------------------------------------------------------
   À charger AVANT le <style> inline de chaque page :
   <link rel="stylesheet" href="pneumologik-theme.css">
   Les noms de variables reprennent EXACTEMENT ceux déjà
   utilisés dans le site, donc tes CSS inline continuent de
   fonctionner sans modification.
   ============================================================ */

/* ---------- MODE SOMBRE (défaut) ---------- */
:root,
:root[data-theme="dark"]{
  /* surfaces */
  --bg:#0B111B;
  --bg2:#0F1622;
  --surf:#141D2B;
  --surf2:#1C2838;
  --border:#243246;
  --border2:#2F415A;

  /* texte */
  --text:#EAF1FB;
  --muted:#8499B2;
  --subtle:#4A5E76;

  /* accents (légèrement adoucis vs néon d'origine) */
  --cyan:#2DD4EE;       --cyan-dim:rgba(45,212,238,.12);
  --purple:#8B7BF6;     --purple-dim:rgba(139,123,246,.12);
  --green:#34E3A0;      --green-dim:rgba(52,227,160,.10);
  --gold:#FFC74D;       --gold-dim:rgba(255,199,77,.12);
  --red:#FF6B6B;        --red-dim:rgba(255,107,107,.10);
  --orange:#F5A33C;     --orange-dim:rgba(245,163,60,.10);

  /* identité */
  --grad-brand:linear-gradient(135deg,#2DD4EE,#8B7BF6);
  --glow-1:rgba(45,212,238,.07);   /* halo radial cyan  */
  --glow-2:rgba(139,123,246,.05);  /* halo radial violet */
  --shadow:0 8px 30px rgba(0,0,0,.38);
  --shadow-sm:0 3px 12px rgba(0,0,0,.30);

  /* rayons (inchangés) */
  --r:12px; --r-sm:8px; --r-lg:16px;

  color-scheme:dark;
}

/* ---------- MODE CLAIR ---------- */
:root[data-theme="light"]{
  --bg:#EDF2F9;
  --bg2:#E3EBF4;
  --surf:#FFFFFF;
  --surf2:#F2F7FC;
  --border:#DBE4EF;
  --border2:#C7D5E6;

  --text:#0E1A2B;
  --muted:#566A83;
  --subtle:#93A4B8;

  /* accents assombris pour garder le contraste AA sur fond clair */
  --cyan:#0C7E98;       --cyan-dim:rgba(12,126,152,.10);
  --purple:#6A55D8;     --purple-dim:rgba(106,85,216,.10);
  --green:#0A7E51;      --green-dim:rgba(10,126,81,.10);
  --gold:#9C6608;       --gold-dim:rgba(156,102,8,.12);
  --red:#CB3B4E;        --red-dim:rgba(203,59,78,.10);
  --orange:#A85909;     --orange-dim:rgba(168,89,9,.10);

  --grad-brand:linear-gradient(135deg,#0C7E98,#6A55D8);
  --glow-1:rgba(14,150,180,.06);
  --glow-2:rgba(106,85,216,.05);
  --shadow:0 10px 30px rgba(20,45,80,.10);
  --shadow-sm:0 3px 12px rgba(20,45,80,.07);

  color-scheme:light;
}

/* ---------- transition douce au basculement ---------- */
body{
  transition:background-color .35s ease, color .35s ease;
}
/* (optionnel) lisser aussi cartes et bordures pendant le switch */
.qa-card,.domain-card,.player-card,.question-card,.tool-card,
.leaderboard-preview,.daily-banner,.xp-panel,.modal,.choice,nav,footer{
  transition:background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* ============================================================
   HELPERS
   ============================================================ */

/* texte en dégradé de marque — remplace les
   `linear-gradient(135deg,#00d4ff,#b388ff)` codés en dur */
.pl-grad-text{
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* icônes Lucide : héritent de la couleur du parent (currentColor) */
.lucide{width:1em;height:1em;stroke-width:1.75;vertical-align:-0.125em;}

/* ============================================================
   BOUTON DE BASCULE CLAIR / SOMBRE
   ============================================================ */
.pl-theme-toggle{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 14px;border-radius:999px;
  background:var(--surf);border:1px solid var(--border);
  color:var(--muted);
  font:600 12px/1 'Plus Jakarta Sans',system-ui,sans-serif;
  cursor:pointer;transition:all .18s ease;white-space:nowrap;
}
.pl-theme-toggle:hover{color:var(--text);border-color:var(--cyan);background:var(--surf2);}
.pl-theme-toggle .lucide{width:16px;height:16px;}
@media(max-width:700px){
  .pl-theme-toggle .pl-tt-label{display:none;}
  .pl-theme-toggle{padding:0 10px;}
}