/* ==========================================================
   Modalità Dark — Soft Dark DSA (AA/AAA)
   Palette pensata per lettura prolungata + DSA
   ========================================================== */

html[data-theme="dark"]{
  /* Base */
  --bg:#181a1f;           /* fondo pagina (grafite caldo)           */
  --fg:#f2f5fa;           /* testo principale                        */ /* ≈11.6:1 vs bg → AAA */
  --muted:#aab2bf;        /* testo secondario                        */

  /* Contenitori */
  --panel:#23262d;        /* pannelli/box                            */ /* ≈8.5:1 con fg → AAA */
  --panel-border:#373b43; /* bordi sottili                           */

  /* Interattivi / accenti */
  --brand:#3b9eff;        /* pulsanti/link                           */ /* ≈6.9:1 vs bg → AA*/
  --callout:#ff8c42;      /* barra arancione dei callout             */

  /* Codice / tastiera */
  --code-bg:#2d3139;
  --kbd-bg:#f0f2f5;
  --kbd-fg:#111;

  /* Ombre */
  --shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Fondo leggermente “vivo” per evitare effetto coltre */
html[data-theme="dark"] body{
  background: radial-gradient(circle at 20% 0%, #1d2025 0%, #181a1f 60%);
  color: var(--fg);
}

/* Pannelli e testata */
html[data-theme="dark"] .panel{
  background: var(--panel) !important;
  border-color: var(--panel-border) !important;
  box-shadow: 0 0 14px rgba(0,0,0,.25);
}
html[data-theme="dark"] .page-header{
  border-bottom-color: var(--panel-border) !important;
}

/* Callout più leggibile */
html[data-theme="dark"] .callout{
  background: linear-gradient(90deg, #2b241e 0%, var(--panel) 72%);
  border-left-color:#ff9a58;
}
html[data-theme="dark"] .callout :is(h2,h3,p,li){ color:#f7f9fc; }

/* Box, steps, dettagli, figure */
html[data-theme="dark"] :is(.box, .steps > li, details, .figure){
  background: var(--panel) !important;
  border-color: var(--panel-border) !important;
  color: var(--fg) !important;
}
html[data-theme="dark"] .box a{ color: var(--brand); }
html[data-theme="dark"] hr{ border-color: var(--panel-border) !important; }

/* Bottoni e toggle tema */
html[data-theme="dark"] .btn      { background: var(--brand); color:#fff !important; }
html[data-theme="dark"] .btn-ghost{ background: transparent; color: var(--brand) !important; border-color: var(--brand); }
html[data-theme="dark"] #theme-toggle{ background: var(--brand); color:#fff; }

/* Opzionale: pannelli un filo più “piatti” */
html[data-theme="dark"] .panel.soft{ box-shadow:none; }

/* ==========================================================
   (Opzionale) High-Contrast AAA — attiva con data-contrast="aaa"
   Usalo solo quando ti serve contrasto massimo (verifiche/proiezioni)
   ========================================================== */

html[data-theme="dark"][data-contrast="aaa"]{
  --bg:#15171b;
  --fg:#fafcff;         /* ancora più chiaro */
  --panel:#20232a;
  --panel-border:#3e434c;
  --brand:#2f81f7;      /* blu un po’ più scuro → testo bianco più leggibile */
  --callout:#ffa455;    /* arancione più luminoso */
}

html[data-theme="dark"][data-contrast="aaa"] .panel{
  box-shadow: none;
}

html[data-theme="dark"][data-contrast="aaa"] .callout{
  background:#20232a;
  border-left-color:#ffae6a;
}