/* ============================================================
   zkry — TOKENS
   Direction : encre froide, plasma aqua, chrome.
   Changer --accent rhabille l'intégralité du site.
   ============================================================ */

:root{
  /* --- Niveau 1 : palette brute (ne jamais utiliser directement) --- */
  --ink-950:#05070d;
  --ink-900:#0a0e17;
  --ink-850:#0f1421;
  --ink-800:#141b2b;
  --ink-700:#1d2739;
  --ink-500:#4d5b74;
  --ink-400:#7d8aa3;
  --ink-300:#a4afc2;
  --ink-200:#cdd5e2;
  --ink-100:#e6ebf2;
  --ink-050:#f3f6fa;

  --aqua-700:#006d5e;
  --aqua-600:#008574;
  --aqua-500:#00b598;
  --aqua-400:#00e6c3;
  --aqua-300:#5df5dc;

  --plasma-froid:#12306e;   /* bleu profond   */
  --plasma-vif:#00e6c3;     /* aqua électrique */
  --plasma-chaud:#d9fbff;   /* blanc chaud    */

  /* --- Niveau 2 : rôles — c'est CE QU'ON UTILISE dans le CSS --- */
  --fond:            var(--ink-050);
  --fond-invers:     var(--ink-950);
  --surface:         #ffffff;
  --bordure:         #dce3ed;
  --texte:           var(--ink-950);
  --texte-doux:      #4f5c73;
  --texte-invers:    var(--ink-050);
  --texte-invers-doux:#98a5bb;
  --accent:          var(--aqua-700);
  --accent-contraste:#ffffff;
  --succes:          #0b7a52;
  --erreur:          #c02638;

  /* Scène 3D — lue depuis JavaScript */
  --3d-froid:        #b9c6da;
  --3d-vif:          var(--aqua-500);
  --3d-chaud:        #2b3d5c;
  --3d-brume:        var(--ink-050);

  /* --- Espacement : échelle unique, rien en dehors --- */
  --e1:4px;  --e2:8px;  --e3:16px; --e4:24px;
  --e5:40px; --e6:64px; --e7:96px; --e8:140px;

  /* --- Typographie --- */
  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.0625rem;
  --t-lg:1.25rem;  --t-xl:1.5rem;   --t-2xl:2rem;

  /* --- Formes --- */
  --r-sm:6px; --r-md:12px; --r-full:999px;
  --ombre:0 28px 56px -32px rgb(5 7 13 / .28);
  --transition:260ms cubic-bezier(.2,.8,.2,1);
  --conteneur:1180px;
  --lecture:64ch;

  --font-titre:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
  --font-texte:'Instrument Sans','Segoe UI',system-ui,sans-serif;
}

/* --- Mode sombre : préférence système --- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:var(--ink-950);
    --fond-invers:var(--ink-050);
    --surface:var(--ink-900);
    --bordure:#1b2434;
    --texte:var(--ink-050);
    --texte-doux:var(--ink-400);
    --texte-invers:var(--ink-950);
    --texte-invers-doux:#5a6885;
    --accent:var(--aqua-400);
    --accent-contraste:var(--ink-950);
    --succes:#3ee6a0;
    --erreur:#ff7a8a;
    --ombre:0 28px 56px -32px rgb(0 0 0 / .8);
    --3d-froid:var(--plasma-froid);
    --3d-vif:var(--plasma-vif);
    --3d-chaud:var(--plasma-chaud);
    --3d-brume:var(--ink-950);
  }
}

/* --- Mode sombre : choix manuel, l'emporte sur le système --- */
:root[data-theme="dark"]{
  --fond:var(--ink-950);
  --fond-invers:var(--ink-050);
  --surface:var(--ink-900);
  --bordure:#1b2434;
  --texte:var(--ink-050);
  --texte-doux:var(--ink-400);
  --texte-invers:var(--ink-950);
  --texte-invers-doux:#5a6885;
  --accent:var(--aqua-400);
  --accent-contraste:var(--ink-950);
  --succes:#3ee6a0;
  --erreur:#ff7a8a;
  --ombre:0 28px 56px -32px rgb(0 0 0 / .8);
  --3d-froid:var(--plasma-froid);
  --3d-vif:var(--plasma-vif);
  --3d-chaud:var(--plasma-chaud);
  --3d-brume:var(--ink-950);
}