/* ==========================================================
   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"] #themeToggle { 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;
}
/* ===== Fix contrasto per tema scuro (2025-10) ===== */
html[data-theme="dark"] body,
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] .card,
html[data-theme="dark"] .content,
html[data-theme="dark"] .callout,
html[data-theme="dark"] .callout-info,
html[data-theme="dark"] .callout-warning,
html[data-theme="dark"] .callout-success,
html[data-theme="dark"] .note,
html[data-theme="dark"] .tip {
  color: #f1f1f1 !important;
  background-color: #1c1c1c !important;
}
html[data-theme="dark"] .callout-info {
  background-color: #1e2a2a !important;
  border-left: 4px solid #2dd4bf !important;
}
html[data-theme="dark"] .callout-warning {
  background-color: #2a251b !important;
  border-left: 4px solid #facc15 !important;
}
html[data-theme="dark"] .callout-success {
  background-color: #1b2a1c !important;
  border-left: 4px solid #4ade80 !important;
}
html[data-theme="dark"] code,
html[data-theme="dark"] pre code {
  color: #f8f8f2 !important;
  background-color: #2d2d2d !important;
}
html[data-theme="dark"] a {
  color: #93c5fd;
}
/* ===== Fine fix contrasto ===== */
/* ===== Fix contrasto per tema scuro (esteso) ===== */
html[data-theme="dark"] .callout,
html[data-theme="dark"] .callout-info,
html[data-theme="dark"] .callout-warning,
html[data-theme="dark"] .callout-success,
html[data-theme="dark"] .note,
html[data-theme="dark"] .tip {
  background-color: #1c1c1c !important;
  color: #f1f1f1 !important;
}

/* forza anche i figli tipici delle callout */
html[data-theme="dark"] .callout *,
html[data-theme="dark"] .callout-info *,
html[data-theme="dark"] .callout-warning *,
html[data-theme="dark"] .callout-success *,
html[data-theme="dark"] .note *,
html[data-theme="dark"] .tip * {
  color: #f1f1f1 !important;
}

/* varianti leggere delle tue box */
html[data-theme="dark"] .callout-info {
  background-color: #1e2a2a !important;
  border-left: 4px solid #2dd4bf !important;
}

html[data-theme="dark"] .callout-warning {
  background-color: #2a251b !important;
  border-left: 4px solid #facc15 !important;
}

html[data-theme="dark"] .callout-success {
  background-color: #1b2a1c !important;
  border-left: 4px solid #4ade80 !important;
}

/* codice inline e badge comando */
html[data-theme="dark"] code,
html[data-theme="dark"] pre code,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .cmd-badge {
  background-color: #2d2d2d !important;
  color: #f8f8f2 !important;
}

/* se hai <pre> chiari dentro callout */
html[data-theme="dark"] pre {
  background-color: #121212 !important;
  color: #f8f8f2 !important;
}
/* ==========================================================
   FIX PRISM.JS PER DARK MODE
   Rimuove il "banding" e i conflitti di sfondo nei blocchi di codice
   ========================================================== */
html[data-theme="dark"] pre[class*="language-"] code,
html[data-theme="dark"] pre[class*="language-"] code * {
    background-color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Opzionale: Assicura che il contenitore esterno abbia il colore giusto */
html[data-theme="dark"] pre[class*="language-"] {
    background-color: #2d2d2d !important; /* O il colore che preferisci per il box */
    text-shadow: none !important;
}
/* ==========================================================
   SINTASSI COLORATA PER DARK MODE (Manual Override)
   Rende i colori di Prism leggibili su sfondo scuro
   ========================================================== */

/* 1. Colore base del testo (punteggiatura, parentesi, ecc.) */
html[data-theme="dark"] pre[class*="language-"] code {
  color: #f8f8f2 !important; /* Bianco sporco */
}

/* 2. Commenti (grigio chiaro) */
html[data-theme="dark"] .token.comment,
html[data-theme="dark"] .token.prolog,
html[data-theme="dark"] .token.doctype,
html[data-theme="dark"] .token.cdata {
  color: #aab2bf !important;
}

/* 3. Punteggiatura (grigio medio) */
html[data-theme="dark"] .token.punctuation {
  color: #abb2bf !important;
}

/* 4. Tag HTML, Nomi di proprietà (Rosso/Rosa chiaro) */
html[data-theme="dark"] .token.property,
html[data-theme="dark"] .token.tag,
html[data-theme="dark"] .token.boolean,
html[data-theme="dark"] .token.number,
html[data-theme="dark"] .token.constant,
html[data-theme="dark"] .token.symbol,
html[data-theme="dark"] .token.deleted {
  color: #e06c75 !important;
}

/* 5. Selettori CSS, Nomi attributi (Arancione/Giallo) */
html[data-theme="dark"] .token.selector,
html[data-theme="dark"] .token.attr-name,
html[data-theme="dark"] .token.string,
html[data-theme="dark"] .token.char,
html[data-theme="dark"] .token.builtin,
html[data-theme="dark"] .token.inserted {
  color: #98c379 !important; /* Verde pastello per le stringhe */
}

html[data-theme="dark"] .token.attr-name {
  color: #d19a66 !important; /* Arancione per attributi */
}

/* 6. Operatori, Entità, Url (Ciano/Azzurro) */
html[data-theme="dark"] .token.operator,
html[data-theme="dark"] .token.entity,
html[data-theme="dark"] .token.url,
html[data-theme="dark"] .language-css .token.string,
html[data-theme="dark"] .style .token.string {
  color: #56b6c2 !important;
}

/* 7. Funzioni e Classi (Blu/Viola chiaro) */
html[data-theme="dark"] .token.atrule,
html[data-theme="dark"] .token.attr-value,
html[data-theme="dark"] .token.keyword {
  color: #c678dd !important; /* Viola per le keyword come 'if', 'return' */
}
html[data-theme="dark"] .token.function,
html[data-theme="dark"] .token.class-name {
  color: #61afef !important; /* Blu chiaro per le funzioni */
}