/* =============================================================
   PUBLIC-THEME.CSS — sistema di tema chiaro/scuro del sito pubblico.

   File dedicato, caricato per ULTIMO nella catena degli stylesheet
   (fable-tokens.css → public.css → public-motion.css → questo file),
   cosi' i suoi override vincono la cascata senza bisogno di
   !important. Non duplica public.css: contiene solo il blocco di
   override delle variabili semantiche per html[data-theme="dark"],
   lo stile del pulsante toggle, e le transizioni con scope limitato.

   fable-tokens.css NON viene mai toccato: qualunque token mancante è
   definito qui o in public.css, mai nel design system condiviso.
   ============================================================= */

/* --- pulsante toggle: posizione/dimensione configurabili via custom
   properties, nessun valore duplicato tra breakpoint. --- */
:root {
  --pub-theme-toggle-size: 48px;
  --pub-theme-toggle-offset-x: clamp(16px, 4vw, 28px);
  --pub-theme-toggle-offset-y: clamp(16px, 4vw, 28px);
  /* Scala z-index di fable-tokens.css (non modificabile): header=10,
     dropdown=20, overlay=30, modal=40, toast=50, tooltip=60. Il
     toggle sta sopra il contenuto ordinario ma sotto qualunque
     elemento sovrapposto prioritario: tra overlay e modal. */
  --pub-theme-toggle-z: 35;
}

.fbl-theme-toggle {
  position: fixed;
  right: max(var(--pub-theme-toggle-offset-x), env(safe-area-inset-right, 0px));
  bottom: max(var(--pub-theme-toggle-offset-y), env(safe-area-inset-bottom, 0px));
  width: var(--pub-theme-toggle-size);
  height: var(--pub-theme-toggle-size);
  z-index: var(--pub-theme-toggle-z);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pub-bg);
  border: 1px solid var(--pub-line-strong);
  box-shadow: var(--pub-shadow-md);
  color: var(--pub-text-primary);
  cursor: pointer;
  padding: 0;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.fbl-theme-toggle:hover { border-color: var(--fbl-public-interactive); }
.fbl-theme-toggle:focus-visible { outline: none; box-shadow: var(--fbl-s-focus-ring-light); }
html[data-theme="dark"] .fbl-theme-toggle:focus-visible { box-shadow: var(--fbl-s-focus-ring-dark); }

.fbl-theme-toggle__icon { width: 22px; height: 22px; }
.fbl-theme-toggle__icon--moon { display: none; }
html[data-theme="dark"] .fbl-theme-toggle__icon--sun { display: none; }
html[data-theme="dark"] .fbl-theme-toggle__icon--moon { display: block; }

@media (max-width: 560px) {
  /* Leggero sollevamento su mobile stretto, evitando sovrapposizioni
     con CTA/footer vicini al fondo — stessa variabile, un solo punto
     di verita', nessun valore duplicato altrove. */
  :root { --pub-theme-toggle-offset-y: clamp(16px, 5vw, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .fbl-theme-toggle { transition: none; }
}

/* =============================================================
   OVERRIDE TEMA SCURO — solo variabili semantiche, mai selettori di
   componente diretti (salvo dove esplicitamente documentato sotto).

   Palette rivista (correzione utente): il navy-900 di fable-tokens.css
   (#07111f) risultava troppo vicino al nero puro. Qui si usa una
   palette dedicata al sito pubblico — blu profondo/blu petrolio/verde
   acqua scuro molto controllato — pensata per restare leggibile e
   coerente con l'identita' blu/mint del tema chiaro senza mai toccare
   fable-tokens.css. Quattro livelli di superficie distinti, come
   richiesto: fondo pagina < sezione alternativa < card < card
   elevata; i pannelli tecnici gia' permanentemente scuri (navy panel,
   tech-banner, hero fotografiche) restano sulla scala
   --fbl-p-navy-(scala) e --pub-panel-navy-bg esistenti, INVARIATA.
   ============================================================= */
html[data-theme="dark"] {
  --pub-bg:               #0b1824;  /* fondo pagina — blu profondo, non nero */
  --pub-bg-alt:           #102334;  /* sezione alternativa — blu petrolio */
  --pub-surface:          #142b3d;  /* card — blu ardesia */
  --pub-surface-elevated: #193448;  /* card elevata — leggermente piu' chiara */
  --pub-line:          rgba(220, 232, 246, 0.16);
  --pub-line-strong:   rgba(220, 232, 246, 0.28);
  --pub-footer-bg:     #102334;
  --pub-footer-border: rgba(220, 232, 246, 0.16);

  --pub-header-surface-rgb: 16, 35, 52;   /* canale rgb di --pub-bg-alt */
  --pub-header-pill-rgb:    20, 43, 61;   /* canale rgb di --pub-surface */
  --pub-glass-rgb:          20, 43, 61;

  --pub-text-primary:   var(--fbl-s-text-primary-dark);
  --pub-text-secondary: var(--fbl-s-text-secondary-dark);
  --pub-text-muted:     var(--fbl-s-text-muted-dark);
  --fbl-public-text:        var(--fbl-s-text-primary-dark);
  --fbl-public-interactive: var(--fbl-s-interactive-on-dark);

  /* Accento blu acceso per eyebrow/label/link/CTA secondarie che sui
     token muted risultavano troppo attenuate — MAI sui titoli h2/h3
     principali (quelli restano su --pub-text-primary, quasi bianco). */
  --pub-dark-accent-blue:       var(--fbl-s-interactive-on-dark); /* riuso --fbl-p-blue-400 (#60a5fa), gia' esistente */
  --pub-dark-accent-blue-hover: #83b9ff;

  /* Ombre blu-scuro invece di nero puro: meno pesanti, coerenti con la
     nuova dominante. */
  --pub-shadow-sm: 0 1px 2px rgba(3, 10, 20, 0.35);
  --pub-shadow-md: 0 1px 2px rgba(3, 10, 20, 0.30), 0 10px 24px rgba(3, 10, 20, 0.38);
  --pub-shadow-lg: 0 2px 4px rgba(3, 10, 20, 0.32), 0 20px 44px rgba(3, 10, 20, 0.44);

  --pub-tint-blue:      rgba(29, 78, 216, 0.18);
  --pub-tint-mint:      rgba(109, 198, 179, 0.16);
  --pub-tint-dust:      rgba(220, 232, 246, 0.07);
  --pub-tint-mint-soft: rgba(109, 198, 179, 0.12);

  /* Badge di stato (correzione #6): verificati singolarmente, non
     dedotti da un redirect automatico. I chip chiari su fondo navy
     risultavano troppo luminosi/stonati: qui le varianti dark riusano
     i token success/warning "-on-dark" gia' presenti in
     fable-tokens.css, stesso significato e stessa gerarchia relativa
     (successo piu' saturo di attenzione, entrambi piu' discreti del
     testo primario). */
  --pub-badge-success-bg: var(--fbl-s-success-bg-dark);
  --pub-badge-success-text: var(--fbl-s-success-text-on-dark);
  --pub-badge-success-border: var(--fbl-s-border-dark-strong);
  --pub-badge-warning-bg: var(--fbl-s-warning-bg-dark);
  --pub-badge-warning-text: var(--fbl-s-warning-text-on-dark);
  --pub-badge-warning-border: var(--fbl-s-border-dark-strong);
  --pub-badge-pilot-border: rgba(96, 165, 250, 0.4);
  --pub-badge-documented-text: var(--fbl-s-text-secondary-dark);
  --pub-badge-research-text: var(--fbl-p-mint-500);
  --pub-badge-research-border: rgba(109, 198, 179, 0.4);

  /* Le famiglie --pub-scrim-rgb / --pub-scrim-rgb-alt (usate dagli
     scrim fotografici SCURI) e il testo bianco su foto NON vengono
     ridefiniti qui: quelle sezioni sono gia' scure oggi
     indipendentemente dal tema pagina, e restano tali per costruzione
     (fable-p-navy-900 < navy-800 < navy-700 mantiene la gerarchia).

     --pub-wash-rgb invece DEVE cambiare: e' il velo CHIARO che sfuma
     le hero fotografiche (app-hero, lab-hero, tech-hero-photo,
     how-tools-photo, how-journey-section) verso il lato testo. In
     tema scuro un velo quasi bianco cancellerebbe la foto e renderebbe
     illeggibile il testo (ormai chiaro): diventa un velo navy, stessa
     forma/stessi stop, cosi' la foto sfuma nel fondo scuro invece che
     in una toppa bianca. */
  --pub-wash-rgb: var(--pub-scrim-rgb);
}

html[data-theme="dark"] :focus-visible {
  box-shadow: var(--fbl-s-focus-ring-dark);
}

/* =============================================================
   CORREZIONI PUNTUALI POST-SCREENSHOT — solo colori (fondo, testo,
   bordo, griglia, scrim, ombre di contrasto), MAI dimensioni, layout,
   tipografia, spaziature o serie dati. Il tema chiaro non e' toccato:
   ogni regola qui e' scoped sotto html[data-theme="dark"].
   ============================================================= */

/* Tecnologia e verifica — "Applicazione, dati e rete...": lo switcher
   aveva un fondo tab/pannello rimasto letteralmente bianco/traslucido
   (pensato per un fondo pagina bianco) con testo ormai chiaro sopra.
   Strategia scelta: pannello e tab diventano adattivi come il resto
   del sito (stesso trattamento di .fbl-stepper__tab generico), non
   "sempre chiari" — coerente col resto della pagina, che qui e' gia'
   scura di suo (.fbl-section--dust). */
html[data-theme="dark"] .fbl-tech-switcher .fbl-stepper__tab {
  background: var(--pub-surface);
  border-color: var(--pub-line-strong);
  color: var(--pub-text-secondary);
}
html[data-theme="dark"] .fbl-tech-switcher .fbl-stepper__tab:hover,
html[data-theme="dark"] .fbl-tech-switcher .fbl-stepper__tab:focus-visible {
  background: var(--pub-surface-elevated);
  color: var(--pub-text-primary);
  box-shadow: 0 10px 25px rgba(3, 10, 20, 0.4);
}
/* Pannello di dettaglio: i tre stati (applicativo/dati/rete) hanno in
   tema chiaro un gradiente quasi bianco con un bordo colorato diverso
   per stato (mint/blu/viola) — qui diventano una superficie elevata
   unica per tutti e tre gli stati, mantenendo il bordo colorato come
   unico segnale distintivo (nessun bianco sovraesposto in nessuno dei
   tre). Le regole [data-active-level] del tema chiaro hanno
   specificita' maggiore della sola .fbl-tech-panel: vanno quindi
   sovrascritte esplicitamente una per una, non basta la regola base. */
html[data-theme="dark"] .fbl-tech-panel,
html[data-theme="dark"] .fbl-tech-switcher[data-active-level="dati"] .fbl-tech-panel,
html[data-theme="dark"] .fbl-tech-switcher[data-active-level="rete"] .fbl-tech-panel {
  background: var(--pub-surface-elevated);
}
html[data-theme="dark"] .fbl-tech-panel { border-color: rgba(36, 197, 168, 0.42); }
html[data-theme="dark"] .fbl-tech-switcher[data-active-level="dati"] .fbl-tech-panel { border-color: rgba(96, 165, 250, 0.5); }
html[data-theme="dark"] .fbl-tech-switcher[data-active-level="rete"] .fbl-tech-panel { border-color: rgba(167, 139, 250, 0.48); }
html[data-theme="dark"] .fbl-tech-panel h3 { color: var(--pub-text-primary); }
html[data-theme="dark"] .fbl-tech-panel .fbl-card__text { color: var(--pub-text-secondary); }

/* Pulsante secondario su qualunque sezione ormai scura di suo (non
   solo dentro pannelli navy/tech-banner, che avevano gia' un
   trattamento dedicato): il blu scuro del tema chiaro non e' leggibile
   su un fondo navy. Le regole piu' specifiche esistenti
   (.fbl-panel--navy/.fbl-tech-banner .fbl-btn--secondary) restano
   invariate e continuano a vincere dove gia' presenti. */
html[data-theme="dark"] .fbl-btn--secondary {
  background: var(--pub-surface);
  color: var(--pub-dark-accent-blue);
  border-color: var(--pub-dark-accent-blue);
}
html[data-theme="dark"] .fbl-btn--secondary:hover {
  background: var(--pub-surface-elevated);
  color: var(--pub-dark-accent-blue-hover);
  border-color: var(--pub-dark-accent-blue-hover);
}

/* Protocol Lab — "Un ambiente operativo": il banner centrale era un
   gradiente bianco/mint letterale (illeggibile col testo ormai
   chiaro). Diventa una superficie elevata blu-petrolio con lo stesso
   bordo mint di sempre; il testo eredita gia' --pub-text-primary
   (quasi bianco), nessuna modifica li'. */
html[data-theme="dark"] .fbl-lab-intro__statement {
  background: linear-gradient(135deg, var(--pub-surface-elevated), rgba(109, 198, 179, 0.14));
  border-color: rgba(109, 198, 179, 0.4);
}

/* Documentazione — hero di apertura: gradiente dedicato alla pagina,
   letterale chiaro (bianco/azzurro/mint pallidi), mai adattivo.
   Diventa blu profondo -> blu petrolio -> verde acqua scuro, stessa
   forma/stessi stop, solo colori. L'immagine a destra non e' toccata. */
html[data-theme="dark"] .fbl-doc-page > .fbl-hero:first-child {
  background: linear-gradient(135deg, var(--pub-bg) 0%, var(--pub-bg-alt) 45%, #0f2e28 100%);
}

/* "Categorie documentali / Come orientarsi": stesso problema sul
   pannello immagine+testo (.fbl-doc-hub-card), gia' incluso nella
   gerarchia --pub-surface sopra per lo sfondo; qui si rifinisce con
   un velo leggermente piu' scuro per restare distinguibile dal fondo
   pagina anche quando la sezione circostante e' gia' --pub-bg-alt. */
html[data-theme="dark"] .fbl-doc-hub-card {
  background: var(--pub-surface-elevated);
  border-color: var(--pub-line-strong);
}

/* Come funziona — "Dal progetto al controllo": il velo sopra la foto
   di sfondo (.fbl-how-journey-section__wash) era su rgba(255,255,255,
   *) letterale, mai collegato a --pub-wash-rgb come le altre hero
   fotografiche della pagina — restava un alone bianco anche in dark
   mode. Diventa un velo navy, stessa forma/stessi stop/stessa
   opacita', cosi' la foto resta percepibile ma attenuata invece di
   sparire sotto una toppa chiara. Il testo del titolo aveva inoltre
   un text-shadow bianco pensato per staccare dal velo chiaro: in dark
   mode, con titolo ormai quasi bianco su fondo scuro, quell'alone
   bianco lo rendeva illeggibile — qui diventa un'ombra scura, stesso
   raggio/stessa posizione. */
html[data-theme="dark"] .fbl-how-journey-section__wash {
  background:
    linear-gradient(180deg, rgba(var(--pub-wash-rgb), 0.84), rgba(var(--pub-wash-rgb), 0.9)),
    radial-gradient(circle at 50% 45%, rgba(var(--pub-glass-rgb), 0.22), transparent 58%);
}
html[data-theme="dark"] .fbl-how-journey-section__inner > .fbl-section__title {
  text-shadow: 0 2px 18px rgba(3, 10, 20, 0.7);
}

/* Regola generale: le piccole label monospace di card generiche
   (.fbl-card__eyebrow, riusata su decine di card in tutto il sito,
   incl. le due card fotografiche di Contatti) erano sul token muted,
   troppo attenuato in dark mode. Passa all'accento blu acceso — MAI
   sui titoli h2/h3 principali di sezione. */
html[data-theme="dark"] .fbl-card__eyebrow {
  color: var(--pub-dark-accent-blue);
}

/* Protocol Lab — "Chi puo' utilizzarlo", card in evidenza: il primo
   stop del gradiente era un mint-quasi-bianco letterale, illeggibile
   in dark mode con testo ormai chiaro. */
html[data-theme="dark"] {
  --pub-audience-featured-tint: rgba(109, 198, 179, 0.22);
}

/* Gerarchia superfici: molte card adattive usano var(--pub-bg) per lo
   sfondo (corretto in tema chiaro, dove la card e' comunque bordata),
   ma in tema scuro questo le rende identiche al fondo pagina. Qui si
   riportano alla superficie "card" (--pub-surface, un gradino piu'
   chiara) SOLO in dark mode: nessun cambiamento in tema chiaro. */
html[data-theme="dark"] .fbl-card,
html[data-theme="dark"] .fbl-stepper__panel,
html[data-theme="dark"] .fbl-product-panel,
html[data-theme="dark"] .fbl-context-product__panel,
html[data-theme="dark"] .fbl-landscape__panel,
html[data-theme="dark"] .fbl-state-panel,
html[data-theme="dark"] .fbl-lab-engine-card,
html[data-theme="dark"] .fbl-protocol-properties__card,
html[data-theme="dark"] .fbl-protocol-reference,
html[data-theme="dark"] .fbl-app-status-card,
html[data-theme="dark"] .fbl-app-audience,
html[data-theme="dark"] .fbl-how-models__card,
html[data-theme="dark"] .fbl-contact-path,
html[data-theme="dark"] .fbl-auth-card,
html[data-theme="dark"] .fbl-tabs__panel-inner,
html[data-theme="dark"] .fbl-accordion__item,
html[data-theme="dark"] .fbl-related__item,
html[data-theme="dark"] .fbl-doc-hub-card,
html[data-theme="dark"] .fbl-theatre__panel {
  background: var(--pub-surface);
}
/* .fbl-how-models__card--constant/--growing e .fbl-app-status-card--*
   hanno un gradiente a due colori: la regola sopra basta gia' perche'
   arriva dopo nella cascata e sostituisce il PRIMO stop tramite
   var(--pub-bg) -> qui li si ridefinisce esplicitamente per chiarezza
   e per includere il secondo stop coerente con la nuova superficie. */
html[data-theme="dark"] .fbl-how-models__card--constant { background: linear-gradient(145deg, var(--pub-surface), var(--pub-tint-mint-soft)); }
html[data-theme="dark"] .fbl-how-models__card--growing { background: linear-gradient(145deg, var(--pub-surface), var(--pub-tint-blue)); }
html[data-theme="dark"] .fbl-app-status-card--available { background: linear-gradient(145deg, var(--pub-tint-mint-soft), var(--pub-surface)); }
html[data-theme="dark"] .fbl-app-status-card--pilot { background: linear-gradient(145deg, var(--pub-tint-blue), var(--pub-surface)); }
html[data-theme="dark"] .fbl-app-status-card--research { background: linear-gradient(145deg, var(--pub-tint-dust), var(--pub-surface)); }
html[data-theme="dark"] .fbl-app-status-card--vision { background: linear-gradient(145deg, var(--pub-bg-alt), var(--pub-surface)); }
html[data-theme="dark"] .fbl-app-audience:nth-child(2) { background: var(--pub-tint-mint-soft); }
html[data-theme="dark"] .fbl-app-audience:nth-child(3) { background: var(--pub-tint-blue); }
html[data-theme="dark"] .fbl-contact-path--featured { background: linear-gradient(145deg, var(--pub-tint-mint), var(--pub-surface) 82%); }
html[data-theme="dark"] .fbl-contact-path:nth-child(2) { background: linear-gradient(145deg, var(--pub-tint-blue), var(--pub-surface) 82%); }

/* "Approfondisci" (componente condiviso .fbl-related, presente in
   fondo a tutte le pagine pubbliche): la label monospace era sul
   token muted (troppo attenuata), qui passa all'accento blu acceso.
   Il titolo eredita gia' --pub-text-primary (quasi bianco): nessuna
   modifica necessaria li'. */
html[data-theme="dark"] .fbl-related__item .fbl-related__label {
  color: var(--pub-dark-accent-blue);
}
html[data-theme="dark"] .fbl-related__item .fbl-related__arrow {
  color: var(--pub-dark-accent-blue);
  border-color: var(--pub-line-strong);
}
html[data-theme="dark"] .fbl-related__item:hover,
html[data-theme="dark"] .fbl-related__item:focus-visible {
  border-color: var(--pub-dark-accent-blue);
  background: var(--pub-surface-elevated);
}

/* =============================================================
   GRAFICI SVG — gli attributi di presentazione originali (fill/
   stroke hardcoded nei template) restano come fallback: queste
   regole del foglio di stile vincono comunque sull'attributo SVG,
   quindi in tema chiaro il risultato e' identico a prima. Le classi
   sono state aggiunte nei 4 componenti diagramma solo dove mancavano
   (system_diagram.html, economy_diagram.html, state_chart.html,
   state_chart_home_interactive.html), senza rimuovere nulla.
   ============================================================= */
html[data-theme="dark"] .fbl-diagram__links { stroke: var(--pub-line-strong); }
html[data-theme="dark"] .fbl-diagram__node { fill: var(--pub-bg-alt); stroke: var(--fbl-s-interactive-on-dark); }
html[data-theme="dark"] .fbl-diagram__node-label { fill: var(--pub-text-primary); }
html[data-theme="dark"] .fbl-diagram__caption { color: var(--pub-text-muted); }
html[data-theme="dark"] .fbl-chart__grid { stroke: var(--pub-line); }
html[data-theme="dark"] .fbl-chart__axis-label { fill: var(--pub-text-muted); }
/* .fbl-chart__line / .fbl-chart__points: colore della serie dati
   INVARIATO di proposito in entrambi i temi (stesso blu, stesso
   spessore, stessi punti) — solo il pannello che la ospita cambia
   fondo/testo/griglia attorno ad essa. */
html[data-theme="dark"] .fbl-relational-diagram__label { fill: var(--pub-text-primary); }
html[data-theme="dark"] .fbl-network__tag { fill: var(--pub-text-muted); }

/* --- transizione sobria, solo sui contenitori/controlli principali,
   mai su *. Nessuna animazione di dimensioni/layout/immagini. --- */
body, .fbl-header, .fbl-footer,
.fbl-card, .fbl-btn, .fbl-badge,
.fbl-accordion__item, .fbl-tabs__panel-inner {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .fbl-header, .fbl-footer,
  .fbl-card, .fbl-btn, .fbl-badge,
  .fbl-accordion__item, .fbl-tabs__panel-inner {
    transition: none;
  }
}