/* ============================================================================
   notte.css — il tema scuro di agentica.work, caricato sopra stile.css.

   Stesso markup, colori al contrario: il fondo è il campo profondo
   (--campo-fondo), testi e tracce passano al chiaro, il vermiglio diventa
   --segnale-chiaro come nel marchio SU_CAMPO. La regola «una sola fascia
   diversa per pagina» resta, invertita: qui la fascia del Metodo è chiara.
   I token conservano i nomi di stile.css; cambiano i valori:
   - --white è il fondo della pagina, --campo il colore di titoli e tracce;
   - --segnale-ink è il vermiglio leggibile come testo su fondo scuro.
============================================================================ */
:root {
  --ink: #E3EAF4;
  --soft: #9CAFC9;
  --campo: #F3F6FB;
  --campo-chiaro: #6F9BD6;
  --campo-velo: #12335F;
  --segnale: #EA5A22;
  --segnale-ink: #F08A5D;
  --segnale-velo: rgba(234, 90, 34, 0.1);
  --rule: rgba(255, 255, 255, 0.12);
  --rule-forte: rgba(255, 255, 255, 0.24);
  --wash: #0D2850;
  --white: #081C38;
  --superficie: #0B2244;
  --punto: radial-gradient(circle at center, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1100px 620px at 85% -8%, rgba(60, 111, 184, 0.24), transparent 62%),
    radial-gradient(900px 520px at -10% 38%, rgba(60, 111, 184, 0.1), transparent 60%),
    var(--white);
}
::selection { background: var(--segnale); color: #FFFFFF; }

.testata { background: rgba(8, 28, 56, 0.86); border-bottom-color: rgba(255, 255, 255, 0.1); }
.salta { color: var(--white); }

/* Apertura: il reticolo si vede appena, e svanisce verso il basso. */
.apertura::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--punto); background-size: var(--passo) var(--passo);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

/* Figure: portante bianca, rami azzurri, impulsi che si accendono sul fondo. */
.punti { stroke: rgba(255, 255, 255, 0.14); }
.ramo { stroke: var(--campo-chiaro); }
.portante { stroke: var(--campo); }
.impulso { filter: drop-shadow(0 0 3px rgba(234, 90, 34, 0.75)); }
.fermata circle, .tappa { fill: var(--white); }

/* Superfici: un gradino sopra il fondo, bordi di luce invece che d'inchiostro. */
.prodotto { background: var(--superficie); }
.prodotto:hover { border-color: var(--campo-chiaro); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(111, 155, 214, 0.25); }
.figura-prodotto { background: var(--wash); }
.fondatore { background: var(--superficie); border-color: var(--campo-chiaro); }
.fondatore img { outline-color: var(--campo-chiaro); }
.regole li { border-left-color: var(--segnale); }
.famiglie, .famiglia + .famiglia { border-color: var(--rule-forte); }
.famiglia.non li { border-top-color: rgba(240, 138, 93, 0.25); }
.domini li { background: transparent; }
.domini li:nth-child(5n + 1) { background: var(--campo-velo); border-color: var(--campo-velo); }
.laboratorio em { border-color: var(--rule-forte); }

/* Ritratto: il bicromo resta blu, più chiaro del fondo perché il volto si legga. */
.ritratto { background: #3C6FB8; }
.ritratto::before { background-color: var(--campo-velo); }

.contatti { background-color: var(--campo-velo); }
.bottone { color: var(--white); }
.bottone:hover { color: var(--white); }

/* Metodo: la sola fascia chiara della pagina. Dentro tornano i token del giorno. */
.metodo {
  --ink: #0E1A2B;
  --soft: #55637A;
  --campo: #0D3162;
  --campo-chiaro: #3C6FB8;
  --white: #FFFFFF;
  --su-campo: #0D3162;
  --su-campo-soft: #55637A;
  --segnale-chiaro: #E4501C;
  background-color: #F3F6FB;
  background-image: radial-gradient(circle at center, rgba(13, 49, 98, 0.16) 1.1px, transparent 1.5px);
  color: var(--ink);
}
.metodo .punti { stroke: rgba(13, 49, 98, 0.14); }
.metodo .impulso { filter: none; }
.principi { border-top-color: rgba(13, 49, 98, 0.18); }

.verifiche { background: rgba(234, 90, 34, 0.08); }

/* Pagine legali: la scheda di ogni trattamento sta un gradino sopra il fondo. */
.scheda { background: var(--superficie); }