/* THE AI LAB — il vestito del marchio (F0, 04/10/2026): viola e ambra come le luci del negozio. Fonte: /srv/theailab/marchio/tokens.css.
   I nomi --blu/--ciano restano per compatibilità: --blu È il viola, --ciano È l'ambra (vedi gli alias sotto).
   Stile «premium AI showroom» (addendum §32): scuro, tipografia grande, pochissimo testo, animazioni minime. */
:root {
  --fondo: #0E0B14;        /* grafite: nero caldo con un filo di viola */
  --pannello: #1B1626;     /* ardesia: viola scuro */
  --pannello-2: #151120;
  --bordo: #2A2238;
  --blu: #7C4DE0;          /* VIOLA: la luce delle pareti (bottoni). stile (03/11/2026): era #8B5CF6, col bianco sopra faceva 4,23:1; questo fa 5,3:1 (AA) */
  --viola: #7C4DE0;
  --viola-chiaro: #A78BFA; /* il viola come TESTO o icona sul fondo scuro (7:1); il viola pieno è per gli sfondi */
  --blu-scuro: #6D3BE0;
  --viola-scuro: #6D3BE0;
  --ciano: #F5A524;        /* AMBRA: la luce dietro la TV (accenti, occhi del robot) */
  --ambra: #F5A524;
  --ambra-scura: #D98B16;
  --testo: #FFFFFF;
  --grigio: #9A94AB;       /* didascalie */
  --testo-2: #C9C3D6;
  --ok: #34D399;
  --attenzione: #FBBF24;
  --bagliore-ambra: 0 0 18px rgba(245, 165, 36, .55);
  --bagliore-viola: 0 0 18px rgba(139, 92, 246, .5);
  --errore: #F87171;       /* rosso come testo sul fondo scuro (7:1) */
  --errore-pieno: #DC2626; /* rosso come SFONDO col bianco sopra (4,8:1): bollini, contatori. stile (03/11/2026) */
  --testo-min: .8rem;      /* stile (03/11/2026): nessun testo sotto i 12 px (intestazioni di tabella, etichette, small) */

  --carattere: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-titolo: 800;
  --raggio: 1rem;
  --raggio-piccolo: .6rem;
  --ombra: 0 1.25rem 3rem rgba(0, 0, 0, .35);
  --transizione: 240ms cubic-bezier(.2, .7, .2, 1);

  --marchio: "The AI Lab";

  /* --- scena (docs/scena.md): vetro, luce, ritmo. Solo valori: le regole stanno in static/css/scena.css --- */
  --vetro: rgba(27, 22, 38, .62);            /* pannello di vetro (sopra il fondo vivo) */
  --vetro-2: rgba(14, 11, 20, .42);          /* carta dentro il pannello: secondo livello di profondità */
  --vetro-luce: rgba(255, 255, 255, .06);    /* la luce in alto a sinistra */
  --vetro-sfocatura: 14px;
  --ombra-profonda: 0 28px 56px -28px rgba(0, 0, 0, .75), 0 2px 0 rgba(255, 255, 255, .03) inset;
  --anello-focus: 0 0 0 2px var(--fondo), 0 0 0 4px var(--ambra);
  --luce-ambra: 0 0 24px rgba(245, 165, 36, .45);
  --luce-viola: 0 0 22px rgba(139, 92, 246, .5);
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-scatto: cubic-bezier(.2, .9, .3, 1.15);
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;  /* scala 4/8/12/16/24/32/48 */
}

/* --- Tedesco (cantiere tedesco, 05/10/2026): le parole composte lunghe non sbordano ------------------------------------------------------------
   Con lang="de" (le pagine lo impostano dal server o, sullo schermo cliente e sulla TV, dallo script quando si cambia lingua) il browser sillaba e,
   in mancanza, spezza la parola lunga a fine riga: titoli, bottoni, carte. Italiano e inglese non cambiano. */
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3, html[lang="de"] h4, html[lang="de"] p, html[lang="de"] li, html[lang="de"] label, html[lang="de"] small,
html[lang="de"] .carta, html[lang="de"] .pannello, html[lang="de"] .sottotitolo, html[lang="de"] .didascalia, html[lang="de"] .occhiello { hyphens: auto; overflow-wrap: break-word; }
html[lang="de"] h1 { hyphens: manual; }  /* i titoli grandi non si spezzano a metà parola se ci stanno */
html[lang="de"] .bottone, html[lang="de"] button, html[lang="de"] .nav a, html[lang="de"] .nav summary { hyphens: manual; overflow-wrap: anywhere; text-wrap: balance; }

/* --- sei-porte (06/11/2026; docs/stile.md «I token»): il look approvato dal fondatore nel mockup del 06/11 — viola del logo e arancione, fondo lilla chiarissimo, tema scuro.
   I token nuovi (--bg, --card, --fg, --mut, --line, --acc, --att…) esistono per tutti (qui con i valori del tema scuro di sempre: nessuna pagina cambia);
   su `html.sei-porte` (chi ha il menu a porte: fondatore, titolare della sede, Supporto IT) il tema chiaro rimappa ANCHE i token vecchi (--fondo, --pannello, --testo,
   --grigio, --bordo), così le pagine che li usano si vestono da sole. `data-tema="scuro"` (o il sistema in scuro, senza scelta) = i valori scuri.
   Cabina (06/11/2026; docs/cabina.md «La pelle delle pagine di sempre»): i valori di `html.sei-porte`, chiaro e scuro, sono QUELLI di static/css/cabina.css — una pagina di
   sempre e una pagina nuova sono lo stesso mondo (li confronta tests/test_cabina_pelle.py: se cambia un colore nella cabina, cambia qui). I NOMI restano i nostri, perché
   cabina.css usa `--s1/--s2/--s3` per le superfici e qui `--s1…--s7` è la scala degli spazi. La corrispondenza (cabina → qui):
   --bg → --bg e --fondo · --bg-2 → --bg-2 · --s1 → --card, --pannello, --vetro · --s2 → --card-2, --pannello-2, --vetro-2 · --s3 → --card-3 · --ink → --fg e --testo ·
   --ink-2 → --fg-2 e --testo-2 · --mut → --mut e --grigio · --line → --line e --bordo · --line-2 → --line-2 · --vio → --acc, --blu, --viola · --vio-h → --acc-scuro,
   --blu-scuro, --viola-scuro · --vio-ink → --acc-ink e --viola-chiaro · --vio-soft → --acc-soft · --su-vio → --acc-fg · --amb → --att, --arancio, --serie-2 ·
   --amb-mark → --ambra, --ciano, --attenzione, --ambra-scura · --amb-ink → --att-ink · --amb-soft → --att-soft · --su-amb → --arancio-ink · --red → --crit, --errore ·
   --red-soft → --crit-soft · --su-red → --crit-fg · --grn → --ok-2 e --ok · --grn-soft → --ok-soft · --ombra-1/2/3 e --molo uguali (--ombra-2 è anche --ombra-carta e --ombra, --ombra-3 è
   --ombra-profonda) · --r/--r-2/--r-3 (22/14/10 px: pannelli, secondo livello, piccoli; --raggio = --r, --raggio-piccolo = --r-3) · --disp → --display · --testo (il
   carattere!) → --body e --carattere: «Source Sans 3» per il testo, «Plus Jakarta Sans» per i titoli e i bottoni.
   L'ambra ha tre toni, come nella cabina: --att il pieno (pallini, barre, bollini), --att-ink l'inchiostro (il testo ambra su fondo chiaro: #F5A524 su bianco non si legge),
   --att-soft il fondo tenue. --att-ink esiste per tutti (fuori dalle porte vale come --att: nessuna pagina cambia). Il vecchio --ambra (nelle pagine di sempre fa da testo, da
   segno e da fondo, quasi 500 volte) sul chiaro prende --amb-mark #D98B16, l'ambra che la cabina usa per i segni su fondo chiaro: #F5A524 come scritta su bianco non si legge;
   nello scuro --amb-mark è #F5A524. --------------------- */
:root {
  --bg: #0E0B14; --card: #1B1626; --card-2: #151120; --fg: #FFFFFF; --mut: #9A94AB; --line: #2A2238; --line-2: #231C30;
  --acc: #7C4DE0; --acc-scuro: #6D3BE0; --acc-ink: #A78BFA; --acc-soft: #2B2244; --acc-fg: #FFFFFF;
  --ok-2: #4ED39A; --ok-soft: #163626; --att: #F5A524; --att-ink: #F5A524; --att-soft: #3D2C0F; --crit: #F08A82; --crit-soft: #3F1E1C;
  --serie-2: #F5A524; --serie-2-soft: #3D2C0F; --arancio: #F5A524; --arancio-ink: #1E1A2E; --marchio-gradiente: linear-gradient(135deg, #6D3BE0, #8B5CF6);
  --ombra-carta: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .6);
  --display: "Plus Jakarta Sans", "Trebuchet MS", "Segoe UI", sans-serif; --body: "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --r: 10px; --dur: .4s;
}
html.sei-porte {
  --bg: #F3F0FA; --bg-2: #E9E3F6; --card: #FFFFFF; --card-2: #F7F5FC; --card-3: #EEE9F8; --fg: #17122B; --fg-2: #463F5E; --mut: #6C6585; --line: #E2DCEF; --line-2: #EEEAF6;
  --acc: #6D3BE0; --acc-scuro: #5B2FBF; --acc-ink: #5B2FBF; --acc-soft: #EEE8FD; --acc-fg: #FFFFFF;
  --ok-2: #17845A; --ok-soft: #DDF3E8; --att: #F5A524; --att-ink: #8A5300; --att-soft: #FDEFD3; --crit: #C2302B; --crit-soft: #FCE6E4; --crit-fg: #FFFFFF;
  --serie-2: #F5A524; --serie-2-soft: #FDEFD3; --arancio: #F5A524; --arancio-ink: #2A1500;
  /* i token di prima, rimappati: le pagine di oggi si vestono da sole */
  --fondo: #F3F0FA; --pannello: #FFFFFF; --pannello-2: #F7F5FC; --bordo: #E2DCEF; --testo: #17122B; --testo-2: #463F5E; --grigio: #6C6585;
  --blu: #6D3BE0; --viola: #6D3BE0; --blu-scuro: #5B2FBF; --viola-scuro: #5B2FBF;
  --viola-chiaro: #5B2FBF; --ciano: #D98B16; --ambra: #D98B16; --ambra-scura: #D98B16; --ok: #17845A; --attenzione: #D98B16; --errore: #C2302B; --errore-pieno: #C2302B;
  --vetro: #FFFFFF; --vetro-2: #F7F5FC; --vetro-luce: transparent; --vetro-sfocatura: 0px;
  --anello-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc); --bagliore-ambra: none; --bagliore-viola: none; --luce-ambra: none; --luce-viola: none;
  /* il fondo del molo e le tre ombre, con gli stessi nomi e valori di static/css/cabina.css; le ombre di prima puntano a queste */
  --molo: rgba(255, 255, 255, .86);
  --ombra-1: 0 1px 2px rgba(34, 20, 80, .06);
  --ombra-2: 0 1px 2px rgba(34, 20, 80, .05), 0 14px 34px -18px rgba(52, 30, 120, .22);
  --ombra-3: 0 2px 6px rgba(34, 20, 80, .08), 0 28px 60px -20px rgba(52, 30, 120, .38);
  --ombra-carta: var(--ombra-2); --ombra: var(--ombra-2); --ombra-profonda: var(--ombra-3);
  /* i raggi: pannelli 22, secondo livello 14, piccoli 10 */
  --r: 22px; --r-2: 14px; --r-3: 10px; --raggio: 22px; --raggio-piccolo: 10px;
  /* i caratteri: i titoli e i bottoni restano Plus Jakarta Sans, il testo è Source Sans 3 (static/css/caratteri.css: dal nostro server) */
  --display: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif; --carattere: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
html.sei-porte[data-tema="scuro"], html.sei-porte.tema-scuro {
  --bg: #0E0B14; --bg-2: #150F22; --card: #1A1526; --card-2: #211A31; --card-3: #2A2238; --fg: #F2EEFA; --fg-2: #CFC8DF; --mut: #9A93AE; --line: #30283F; --line-2: #262034;
  --acc: #8B5CF6; --acc-scuro: #9D76F8; --acc-ink: #BBA6F3; --acc-soft: #2A2145; --acc-fg: #FFFFFF;
  --ok-2: #4ED39A; --ok-soft: #14352A; --att: #F5A524; --att-ink: #F8C063; --att-soft: #3A2A0E; --crit: #F0867E; --crit-soft: #3E1D1B; --crit-fg: #2A0B09;
  --serie-2: #F5A524; --serie-2-soft: #3A2A0E;
  --fondo: #0E0B14; --pannello: #1A1526; --pannello-2: #211A31; --bordo: #30283F; --testo: #F2EEFA; --testo-2: #CFC8DF; --grigio: #9A93AE;
  --blu: #8B5CF6; --viola: #8B5CF6; --blu-scuro: #9D76F8; --viola-scuro: #9D76F8;
  --viola-chiaro: #BBA6F3; --ciano: #F5A524; --ambra: #F5A524; --ambra-scura: #F5A524; --ok: #4ED39A; --attenzione: #F5A524; --errore: #F0867E; --errore-pieno: #C2302B;
  --vetro: #1A1526; --vetro-2: #211A31;
  --molo: rgba(30, 24, 44, .86);
  --ombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra-2: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -18px rgba(0, 0, 0, .7);
  --ombra-3: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 60px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}