/* Area Tielogic — stile base.
   I token (colori, tipografia, spaziature) sono copiati da gitea:Adriano/Tielogic-site,
   main:src/styles/tokens.css. Se cambiano là, vanno riallineati qui.
   Su fondo chiaro il teal è #178074 (--c-teal-scuro): il #1FA898 su bianco ha contrasto 2,95, sotto AA. */

/* ==========================================================================
   Tielogic — token di design
   Fonte: STYLE.md (che a sua volta deriva da
   /opt/AI-OS/context/azienda/brand.md).

   Questo file si IMPORTA, non si riscrive. Nessun colore va scritto a mano
   altrove nel CSS: un #1FA898 sparso in una regola è il modo in cui una
   palette si sfalda.

   I contrasti annotati sono misurati con la formula WCAG 2.1.
   ========================================================================== */

:root {
  /* --- Colori del brand ------------------------------------------------- */
  --c-petrolio:      #14505C;  /* primario */
  --c-antracite:     #262B2E;  /* testo, monocromo */
  --c-teal:          #1FA898;  /* accento — SOLO su fondi scuri, vedi sotto */
  --c-teal-chiaro:   #7FD6CB;  /* accento su fondi scuri */

  /* ⚠️ --c-teal su bianco = 2,95 : sotto AA (4,5), sotto testo grande (3,0)
     e sotto la soglia 3,0 degli elementi grafici. Su fondo chiaro NON si usa,
     nemmeno per bordi o icone. Al suo posto: --c-teal-scuro.
     È nato per stare sul petrolio, dove è la firma del simbolo. */
  --c-teal-scuro:    #178074;  /* 4,80 su bianco · 4,51 su crema — AA */

  --c-petrolio-scuro: #0F3D46; /* stato :hover del bottone primario */

  /* --- Colori di prodotto TieVision (brand.md, «TieVision», scelta di Adriano
     del 15/10/2026): il colore sta sul nome del prodotto nel lockup. Sul sito
     si usano SOLO come filetto decorativo della scheda (border-top), mai come
     testo: l'ocra su bianco fa 2,3 e il magenta 4,3, entrambi sotto AA.
     Core resta teal e usa i token teal già esistenti. Le varianti -su-scuro
     sono per le schede del tema scuro. */
  --c-ocra:               #C9A227;  /* studio */
  --c-ocra-su-scuro:      #E2C04F;
  --c-magenta:            #C2457A;  /* assist */
  --c-magenta-su-scuro:   #E07AA6;

  /* --- Neutri (derivati dall'antracite, non da un grigio qualsiasi) ------ */
  --c-grigio-700:    #4A5257;  /* 7,97 su bianco — AAA — testo secondario   */
  --c-grigio-500:    #6E777C;  /* 4,57 — AA — didascalie, metadati          */
  --c-grigio-400:    #8B9297;  /* 3,15 — solo grafica, MAI testo            */
  --c-grigio-200:    #D6DADC;  /* separatori                                */
  --c-grigio-100:    #EBEDEE;  /* fondi di scheda                           */
  --c-crema:         #F7F8F8;  /* fondo di sezione alternato al bianco      */
  --c-bianco:        #FFFFFF;

  /* --- Ruoli semantici: usa QUESTI nei componenti ----------------------- */
  --c-testo:            var(--c-antracite);
  --c-testo-attenuato:  var(--c-grigio-700);
  --c-titolo:           var(--c-petrolio);
  --c-link:             var(--c-teal-scuro);
  --c-bordo:            var(--c-grigio-200);
  --c-fondo:            var(--c-bianco);
  --c-fondo-alt:        var(--c-crema);

  /* Sezioni scure: il posto dove l'accento teal funziona davvero */
  --c-fondo-scuro:           var(--c-petrolio);
  --c-testo-su-scuro:        var(--c-bianco);        /* 9,01 — AAA */
  --c-link-su-scuro:         var(--c-teal-chiaro);   /* 5,31 — AA  */
  --c-bordo-su-scuro:        rgba(255, 255, 255, .12);

  /* --- Tipografia ------------------------------------------------------- */
  /* Font self-hosted in ../fonts/ (woff2, font-display: swap).
     MAI Google Fonts via CDN: richiesta a un terzo con l'IP del visitatore. */
  --font: Jost, "URW Gothic", "Century Gothic", "Avant Garde", system-ui, sans-serif;

  --peso-corrente:  400;
  --peso-medio:     500;
  --peso-titolo:    600;   /* niente 300: illeggibile sui pannelli industriali */

  /* Scala fluida fra viewport 320px e 1280px (rapporto 1,25, base 17px) */
  --t-xs:   0.875rem;
  --t-sm:   0.9375rem;
  --t-base: clamp(1rem,      0.9792rem + 0.1042vw, 1.0625rem);
  --t-lg:   clamp(1.1875rem, 1.1458rem + 0.2083vw, 1.3125rem);
  --t-xl:   clamp(1.4375rem, 1.3542rem + 0.4167vw, 1.6875rem);
  --t-2xl:  clamp(1.6875rem, 1.5625rem + 0.625vw,  2.0625rem);
  --t-3xl:  clamp(1.9375rem, 1.7083rem + 1.1458vw, 2.625rem);

  --interlinea-testo:   1.6;
  --interlinea-titolo:  1.15;
  --spaziatura-etichetta: .08em;   /* maiuscoletto di occhielli ed etichette */

  /* --- Spaziature (base 4px) -------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  /* --- Impaginazione ---------------------------------------------------- */
  --larghezza-contenuto: 1200px;
  --misura-riga:         34em;    /* 65-75 caratteri */
  --padding-pagina:      var(--s-6);

  /* --- Forma ------------------------------------------------------------ */
  --raggio: 4px;   /* 4px o 0. Non tre valori diversi. */

  /* --- Movimento -------------------------------------------------------- */
  --durata: 180ms;
  --curva:  ease-out;
}

@media (min-width: 768px) {
  :root { --padding-pagina: var(--s-8); }
}

/* Ritmo verticale delle sezioni */
:root { --ritmo-sezione: var(--s-16); }
@media (min-width: 768px) {
  :root { --ritmo-sezione: var(--s-24); }
}

/* Nessuna animazione per chi l'ha chiesto */
@media (prefers-reduced-motion: reduce) {
  :root { --durata: 0ms; }
}

/* --- Stile base dell'area (usa solo i token sopra) ---------------------- */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); font-size: var(--t-base); line-height: var(--interlinea-testo);
  color: var(--c-testo); background: var(--c-fondo); min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: var(--c-link); }
h1, h2, h3 { color: var(--c-titolo); font-weight: var(--peso-titolo); line-height: var(--interlinea-titolo); }
.intestazione {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--padding-pagina); background: var(--c-fondo-scuro); color: var(--c-testo-su-scuro);
}
.intestazione a { color: var(--c-link-su-scuro); text-decoration: none; }
.intestazione .marchio { font-weight: var(--peso-titolo); color: var(--c-testo-su-scuro); }
.menu { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.form-esci { margin: 0; }
.pagina { flex: 1; width: 100%; max-width: var(--larghezza-contenuto); margin: 0 auto; padding: var(--s-8) var(--padding-pagina); }
.piede {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-4) var(--padding-pagina); background: var(--c-fondo-alt);
  border-top: 1px solid var(--c-bordo); color: var(--c-testo-attenuato); font-size: var(--t-xs);
}
form.scheda { max-width: 26rem; display: grid; gap: var(--s-3); }
label { display: grid; gap: var(--s-1); font-weight: var(--peso-medio); }
input[type=text], input[type=email], input[type=password] {
  font: inherit; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-grigio-500); border-radius: var(--raggio);
}
button {
  font: inherit; padding: var(--s-2) var(--s-4); border: 0; border-radius: var(--raggio); cursor: pointer;
  background: var(--c-petrolio); color: var(--c-bianco); transition: background var(--durata) var(--curva);
}
button:hover { background: var(--c-petrolio-scuro); }
.intestazione button { background: transparent; border: 1px solid var(--c-bordo-su-scuro); }
.errore-form { color: #8A1C1C; font-weight: var(--peso-medio); }
.ok-form { color: var(--c-teal-scuro); font-weight: var(--peso-medio); }
.elenco { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.elenco li { padding: var(--s-3); border: 1px solid var(--c-bordo); border-radius: var(--raggio); background: var(--c-fondo-alt); }
.schede-area { display: flex; gap: var(--s-4); border-bottom: 1px solid var(--c-bordo); margin-bottom: var(--s-4); }
.schede-area a { padding: var(--s-2) var(--s-3); text-decoration: none; }
.schede-area a.attiva { border-bottom: 2px solid var(--c-teal-scuro); font-weight: var(--peso-titolo); }