/* ═══════════════════════════════════════════════════════
   Modalità scura
   Non è un'inversione: le sezioni già scure restano le più
   profonde, così la gerarchia di contrasto resta quella.
   ═══════════════════════════════════════════════════════ */

html[data-tema="dark"]{
  --paper:#121211;      /* fondo base, era bianco       */
  --paper-2:#1C1C1A;    /* fondo alternato, era avorio  */
  --ink:#F2F1EE;        /* testo, era nero              */
  --mute:#8F8F88;
  --line:rgba(255,255,255,.14);
  --line-inv:rgba(255,255,255,.14);
  --signal:#FF5436;     /* rosso appena più chiaro: su fondo scuro
                           quello originale vibra e stanca         */
  color-scheme:dark;
}

/* Le sezioni nere restano nere, non diventano chiare. */
html[data-tema="dark"] .card--dark,
html[data-tema="dark"] .proc,
html[data-tema="dark"] .rel,
html[data-tema="dark"] .next,
html[data-tema="dark"] .nope,
html[data-tema="dark"] .info-card--dark{
  background:#080808;
  color:var(--ink);
}
html[data-tema="dark"] .info-card--dark{border-color:#080808}

/* Elementi che usavano il nero come fondo: ora sono chiari su scuro,
   ed è corretto - ma il testo dentro va riportato allo scuro. */
html[data-tema="dark"] .btn,
html[data-tema="dark"] .nav .cta,
html[data-tema="dark"] .mailto,
html[data-tema="dark"] .facade-btn,
html[data-tema="dark"] .tag:hover,
html[data-tema="dark"] .filter[aria-current="page"],
html[data-tema="dark"] .other-list a:hover,
html[data-tema="dark"] .ov-close:hover{
  background:var(--ink);
  color:#0E0E0E;
}
html[data-tema="dark"] .btn:hover,
html[data-tema="dark"] .nav .cta:hover,
html[data-tema="dark"] .mailto:hover,
html[data-tema="dark"] .facade-btn:hover{
  background:var(--signal);
  color:#0E0E0E;
}

/* Superfici traslucide */
html[data-tema="dark"] .nav,
html[data-tema="dark"] .filters,
html[data-tema="dark"] .ov-bar{
  background:rgba(18,18,17,.85);
}
html[data-tema="dark"] .ov-panel{background:var(--paper)}
html[data-tema="dark"] .ov-scrim{background:rgba(0,0,0,.5)}
html[data-tema="dark"] .nav a:hover{background:rgba(255,255,255,.08)}
html[data-tema="dark"] .svc-item:hover{background:var(--paper-2)}
html[data-tema="dark"] .site-footer{background:var(--paper)}

/* Riquadri e cornici */
html[data-tema="dark"] .frame,
html[data-tema="dark"] .portrait,
html[data-tema="dark"] .stage,
html[data-tema="dark"] .laio-wait,
html[data-tema="dark"] .meme{background:var(--paper-2)}
html[data-tema="dark"] .bar{background:var(--paper)}

/* Le immagini a piena luce su fondo scuro abbagliano: appena smorzate. */
html[data-tema="dark"] .portrait img,
html[data-tema="dark"] .meme img{filter:brightness(.92)}

/* Il menù mobile è nero anche in chiaro: resta com'è. */
html[data-tema="dark"] .laio-menu{background:#080808}

/* ─── Interruttore ─────────────────────────────────────── */
.tema-toggle{
  width:2.1rem;height:2.1rem;flex:none;
  border:0;background:transparent;cursor:pointer;padding:0;
  border-radius:999px;
  display:grid;place-items:center;
  color:var(--ink);
  transition:background .25s ease,color .25s ease;
}
.tema-toggle:hover{background:var(--paper-2);color:var(--signal)}
.tema-toggle svg{width:15px;height:15px}
.tema-toggle .luna{display:none}
html[data-tema="dark"] .tema-toggle .luna{display:block}
html[data-tema="dark"] .tema-toggle .sole{display:none}

/* Con il menù mobile aperto l'interruttore sta sul nero. */
body.nav-lock .tema-toggle{color:var(--paper)}
body.nav-lock .tema-toggle:hover{background:rgba(255,255,255,.1)}

@media (prefers-reduced-motion:no-preference){
  html.tema-pronto body{transition:background-color .3s ease,color .3s ease}
}