/* Qublo · versione Claude, revisione cromatica chiara.
   Caricare dopo scorrimento.css, senza home-chiara.css.
   Questo foglio cambia soltanto i colori: misure, scene, grafica, ordine,
   profondità, filtri e timeline restano quelli originali di Claude. */

:root {
  color-scheme: light;
  --chiaro: #FFFFFF;
  --fondo-alt: #F6F7FD;
  --lav-piena: #F6F7FD;
  --lav-2: #EEEFFA;
  --nebbia: #EDEFFA;
  --ctrl: #FFFFFF;
  --bianco: #FFFFFF;
  --ink: #161A33;
  --muted: #555B76;
  --line: #DDE1EE;
  --line-2: #BBC2D8;
  --indaco: #5151C9;
  --indaco-h: #4141AA;
  --indaco-p: #3F3FB8;
  --indaco-tenue: #EEEFFA;
  --indaco-ch: #5151C9;
  --pervinca: #8D8FF3;
  --verde: #176B3C;
  --lime: #176B3C;
  --ambra: #805000;
  --ambra-t: #805000;

  /* I nomi storici restano per non alterare i selettori delle scene.
     Nella presentazione chiara identificano superfici e testi chiari. */
  --notte: #F6F7FB;
  --sup: #FFFFFF;
  --sup-2: #EEEFFA;
  --sup-3: #E3E6F6;
  --ink-d: #161A33;
  --muted-d: #555B76;
  --line-d: #DDE1EE;
  --chk: #8992AE;
  --bordo-p: #CDD3E5;
  --palco-notte: #EDEFFA;
  --filetto-notte: #CDD3E5;
  --su-notte: #161A33;
  --su-notte-2: #555B76;

  --fondo: var(--chiaro);
  --fondo-2: var(--fondo-alt);
  --inchiostro: var(--ink);
  --inchiostro-2: var(--muted);
  --filetto: var(--line);
  --filetto-2: var(--line-2);
  --software: var(--palco-notte);
  --software-2: var(--sup);
  --software-3: var(--sup-2);
  --su-software: var(--ink);
  --su-software-2: var(--muted);
  --filetto-software: var(--filetto-notte);
  --focus: var(--indaco);
  --focus-su-scuro: var(--indaco);
}

/* Schermate vere ricostruite: stesso sistema chiaro di app-ui.css.
   Specificità pari o maggiore ai vecchi temi espliciti e agli antenati. */
html .qa,
html .qa[data-tema],
html [data-tema] .qa:not([data-tema]) {
  color-scheme: light;
  --q-bg: #EFF1F9;
  --q-surface: #FFFFFF;
  --q-surface-2: #EEEFFA;
  --q-surface-raised: #E8EAF3;
  --q-ink: #161A33;
  --q-muted: #555B76;
  --q-line: #D0D6E8;
  --q-brand: #5151C9;
  --q-brand-dark: #4141AA;
  --q-brand-text: #5151C9;
  --q-ok: #176B3C;
  --q-bad: #B4233A;
  --q-warn: #805000;
  --q-info: #116B96;
  --q-on-brand: #FFFFFF;
  --q-on-ok: #FFFFFF;
  --q-danger-fill: #B4233A;
  --q-overlay: rgba(85, 91, 118, .28);
  --q-shadow-color: rgba(22, 26, 51, .14);
  --qa-cornice: #C7CDE3;
  --qa-barra-fondo: #E9ECF8;
  --qbar-bg: #FFFFFF;
  --qbar-border: #BBC2D8;
  --qbar-text: #161A33;
  --qbar-muted: #555B76;
}

/* Hero: è una scena dedicata, non un widget .qa. Si ereditano i
   colori chiari anche nei duplicati usati per la corsa e la sfocatura. */
.s-home-hero-fin {
  color-scheme: light;
  --notte: #F6F7FB;
  --sup: #FFFFFF;
  --sup-2: #EEEFFA;
  --sup-3: #E3E6F6;
  --ink-d: #161A33;
  --muted-d: #555B76;
  --line-d: #DDE1EE;
  --indaco-ch: #5151C9;
  --lime: #176B3C;
  --ambra: #805000;
  --chk: #8992AE;
  --bordo-p: #CDD3E5;
}

/* Il palco resta rientrato, tondo e animato da scorrimento.js.
   Cambiano solo il pigmento di ::before e l'inchiostro dei contenuti. */
html .sezione--notte {
  color-scheme: light;
  --software: #EDEFFA;
  --inchiostro: #161A33;
  --inchiostro-2: #555B76;
  --su-software: #161A33;
  --su-software-2: #555B76;
  --ink-d: #161A33;
  --muted-d: #555B76;
  --line-d: #CDD3E5;
  --filetto: #CDD3E5;
  --filetto-2: #BBC2D8;
  --segnaposto: rgba(22, 26, 51, .28);
  --focus: #5151C9;
  color: var(--inchiostro);
}

.testata,
.testata.is-scura { background: #FFFFFF; }
.s-home-hero-palco { background: var(--nebbia); border-color: var(--line); }
.s-home-hero-contatore, .s-home-hero-pub-n { color: #4141AA; }

/* La barra grafica conserva quattro tinte distinte; il colore testuale
   dell'IVA e del profitto usa invece i token leggibili sul chiaro. */
.s-home-perche-c4 { background: #A9ADF0; }
.s-home-perche-pill--vero.is-on { background: #FFF0CC; color: #805000; }

/* Le icone dei prodotti hanno le varianti autentiche del tema chiaro. */
html .qa .qa-thumb[data-tinta="1"] { color: #3D5BD9; }
html .qa .qa-thumb[data-tinta="2"] { color: #17795A; }
html .qa .qa-thumb[data-tinta="3"] { color: #A65A0C; }
html .qa .qa-thumb[data-tinta="4"] { color: #B8325F; }
html .qa .qa-thumb[data-tinta="5"] { color: #6045D1; }

/* Pannello dell'estensione: il fornitore era già chiaro; il popup e la
   colonna Qublo seguono ora il medesimo tema senza cambiare la scena. */
html .widget-estensione,
html .widget-estensione[data-tema],
html [data-tema] .widget-estensione:not([data-tema]) {
  --we-x-primario-chiaro: #4444AD;
  --we-x-ok-fondo: #E9F5EC;
  --we-x-ok-testo: #205C30;
}

/* Tooltip e barra delle operazioni sono superfici chiare. */
html .qa .qa-suggerimento { background: #FFFFFF; color: #161A33; }
html .qa .qa-suggerimento > span { color: #555B76; }
html .qa .qa-massa > b { color: #FFFFFF; }
html .qa .qa-pill--spenta { color: var(--q-muted); }

/* Azioni principali e selezioni: il viola guida l'occhio sul tema chiaro.
   Filtri secondari lavanda; stati di successo/verdi e azioni pericolose/rosse. */
html .qa .qa-btn--primario,
html .qa.widget-bozze .wb-m-pubblica {
  background: var(--q-brand);
  color: var(--q-on-brand);
  border-color: var(--q-brand);
}
html .qa.widget-bozze .wb-m-pubblica.is-premuto,
html .qa .qa-btn--primario.is-premuto { background: var(--q-brand-dark); }
html .qa.widget-bozze .wb-m-conto { color: #FFFFFF; }
html .qa.widget-importa .qa-azioni .qa-azione--ok,
html .qa.widget-bozze .qa-azioni .qa-azione--ok {
  background: var(--q-brand);
  color: #FFFFFF;
}
html .qa .qa-btn--filtri {
  background: #E8E6FC;
  border-color: #B3ACEB;
  color: #4141AA;
}
html .qa .qa-schede:not(.qa-schede--pulsanti) .qa-scheda.is-attiva,
html .qa.widget-ordini .wo-d-schede > span.is-attiva { color: var(--q-brand); }
html .qa.widget-messaggi .wm-scrivi.is-scrive .wm-invia {
  background: var(--q-brand);
  color: var(--q-on-brand);
}
@media (hover: hover) and (pointer: fine) {
  html .qa button.qa-btn--primario:hover,
  html .qa.widget-bozze .wb-m-pubblica:hover { background: var(--q-brand-dark); }
}

/* Nel vecchio palco gli hover diventavano bianchi: sul chiaro restano
   indaco. Non viene modificata alcuna transizione o animazione. */
@media (hover: hover) and (pointer: fine) {
  .sezione--notte .pulsante--secondario:hover,
  .sezione--notte .cornice .qa-pausa:hover,
  .sezione--notte .pausa:hover,
  .sezione--notte .link:hover,
  .sezione--notte .link-azione:hover,
  .sezione--notte .domanda > summary:hover { color: var(--indaco-h); }
}