/* 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: #8B5CF6;          /* VIOLA: la luce delle pareti (bottoni) */
  --viola: #8B5CF6;
  --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;

  --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; }