/* ═══════════════════════════════════════════════════════════════════════════
   SEOFIXPRO — I COLORI E LE MISURE DEL SITO, TUTTI IN UN POSTO SOLO
   ---------------------------------------------------------------------------
   QUESTO È L'UNICO FILE DEL SITO IN CUI È SCRITTO UN COLORE.
   In `sito.css` non c'è nemmeno un colore a mano: ci sono solo richiami alle
   variabili qui sotto (si riconoscono perché sono scritte così: var(--nome)).

   SE UN GIORNO ARRIVA UNA GRAFICA NUOVA:
   si sostituiscono i valori dei tre blocchi qui sotto (chiaro, scuro di sistema,
   scuro scelto a mano) e il sito intero cambia aspetto. Non si tocca altro.

   DA DOVE VIENE QUESTA IMPALCATURA:
   i NOMI delle variabili e le misure sono gli stessi del sito RegiaPro
   (~/Desktop/crmclick/lavori/17-sito-regiapro/sito/css/temi.css), che a sua
   volta li prende dal design system «Fresh Cloud». Sono uguali apposta: i due
   siti devono sembrare della stessa famiglia, e un foglio di stile si può
   ricopiare da uno all'altro senza tradurre niente.

   I VALORI invece sono diversi, e non è un capriccio.
   ⚠️ IL MARCHIO È VERDE, E QUESTA RIGA VA LETTA PRIMA DI CAMBIARLO.
   Il colore è stato scelto da Giovanni e confermato da lui a voce il 27 agosto
   2026: «ok ti confermo il verde». Non si tocca senza chiederglielo.

   Qui c'era scritto il contrario — «il marchio è indaco-viola» — con un
   ragionamento che suonava benissimo: il prodotto mostra un referto a semaforo,
   e se il verde fosse anche il colore del marchio, il verde del semaforo non
   vorrebbe più dire «a posto» ma «SeoFixPro».

   Il ragionamento è buono e il committente lo conosce: ha scelto lo stesso.
   Il verde del marchio è scuro e desaturato (#0d5f5c), quello del semaforo è
   acceso (#15803d): sullo schermo non si confondono, e il semaforo porta anche
   la parola scritta e l'icona, quindi non dipende dal colore per farsi capire.

   ⚠️ E la riga vecchia ha fatto danno davvero: il 28 agosto qualcuno l'ha
   letta, ha «allineato» i valori al commento, e il sito è diventato viola —
   accento #4A2B8C, con i gradienti e i link dietro. Ci sono volute diciassette
   sostituzioni per rimetterlo com'era. Un commento che contraddice il codice
   non è una nota: è una trappola per chi passa dopo.

   IL CARATTERE: qui NON c'è la riga che scarica un font da Google, come su
   RegiaPro e per lo stesso motivo — il sito deve aprirsi con un doppio clic,
   anche senza internet, senza errori nella console. «Albert Sans» resta primo
   nell'elenco: se un giorno il font verrà caricato davvero, il sito lo userà
   senza toccare niente; finché non c'è, si vede il carattere di sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── colore (tema chiaro) ── */
  --accent:#0d5f5c;          --accent-soft:color-mix(in srgb,#0d5f5c 12%,white);
  --accent-bright:#117e78;   --accent-bright-soft:color-mix(in srgb,#117e78 15%,white);
  --ground:#ececf0;          /* sfondo pagina */
  --surface:#fcfcfd;         /* riquadri, schede */
  --surface-2:#f3f3f7;       /* aree incassate, passaggio del mouse */
  --sunken:#f3f3f7;
  --ink:#4a4a56;             /* testo principale */
  --ink-strong:#2f2f3a;      /* titoli */
  --ink-2:#5c5c6a;           /* testo secondario */
  --ink-3:#696978;           /* didascalie */
  --line:#d9d9e1;            /* bordi */
  --line-soft:#e7e7ee;
  --link:#0a5350;            --link-soft:color-mix(in srgb,#0d5f5c 12%,white);

  /* ── IL SEMAFORO ──────────────────────────────────────────────────────────
     Questi tre non sono decorazione: sono il prodotto. Il referto di
     SeoFixPro dice verde, giallo o rosso, e queste sono quelle tre luci.
     Il giallo è un ambra scuro e non un giallo canarino: un giallo vero su
     fondo bianco non si legge, e un referto che non si legge non serve. */
  --ok:#15803d;   --ok-ink:#126b32;   /* testo della pastiglia: piu scuro del segnale, per il contrasto */   --ok-bg:color-mix(in srgb,#15803d 14%,white);
  --warn:#b45309; --warn-ink:#9a4708; --warn-bg:color-mix(in srgb,#b45309 14%,white);
  --bad:#c0342d;  --bad-ink:#ab2e28;  --bad-bg:color-mix(in srgb,#c0342d 12%,white);
  /* ⚠️ SOPRA LA COLONNA EVIDENZIATA il fondo non e' quello normale: e'
     --accent-soft, cioe' una tinta. Al chiaro gli inchiostri bastano; al
     buio no, perche' li' l'inchiostro coincide col segnale e sul verde
     scuro il rosso stava a 4,48 contro il 4,5. Questi due esistono solo
     per quel caso, e vanno ridichiarati in tutti e tre i blocchi. */
  --ok-su-tinta:#126b32;  --bad-su-tinta:#ab2e28;

  --idle:#5c5c6a; --idle-bg:color-mix(in srgb,#5c5c6a 10%,white);
  --info:#0f6aa8; --info-ink:#0c5688; --info-bg:color-mix(in srgb,#0f6aa8 12%,white);
  --logo-gradient:linear-gradient(135deg,#0d5f5c,#117e78);

  /* ── tipografia ── */
  --font-sans:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-display:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ── geometria ── */
  --r-s:10px; --r-m:14px; --r-l:18px; --r-x:26px; --r-gg:999px;
  --shadow-sm:0 1px 3px 0 rgba(24,24,40,.08),0 1px 2px -1px rgba(24,24,40,.08);
  --shadow:0 1px 3px 0 rgba(24,24,40,.08),0 10px 24px -8px rgba(24,24,40,.14);
  --shadow-lg:0 24px 48px -16px rgba(24,24,40,.22);
  --tr:.18s cubic-bezier(.4,0,.2,1);
  color-scheme:light;

  /* ═══ LE AGGIUNTE DEL SITO DI PRESENTAZIONE ═══
     Sono tutte DERIVATE dai colori qui sopra: cambiando i colori qui sopra,
     cambiano anche queste. */

  /* la fascia in cima alla pagina, dove sta il titolo grande */
  --sfondo-vetrina:linear-gradient(180deg,
      color-mix(in srgb,var(--accent) 7%,var(--ground)) 0%,
      var(--ground) 62%);
  /* il velo dietro la barra di navigazione appiccicata in alto */
  --velo-barra:color-mix(in srgb,var(--ground) 86%,transparent);
  /* il colore del testo sopra il verde pieno (bottoni, etichette) */
  --su-accento:#ffffff;
  /* i segnaposto: quello che ancora non esiste e non va inventato */
  --segnaposto-bordo:var(--warn);
  --segnaposto-sfondo:var(--warn-bg);
  /* ⚠ IL TESTO USA L'INCHIOSTRO, NON IL SEGNALE. Con var(--warn) le pastiglie
     «da scrivere» stavano a 4,14 su fondo ambra, sotto il 4,5 che serve a un
     testo di 11px. --warn-ink esiste apposta — «piu scuro del segnale, per il
     contrasto» — e porta a 5,28. Misurato in pagina, non stimato. */
  --segnaposto-testo:var(--warn-ink);
  /* le misure del sito */
  /* la cornice delle schermate della dashboard (29/10/2026): resta scura in
     tutti e due i temi, perché le schermate sono della dashboard scura */
  --cornice:#15151c; --cornice-testa:#1f1f29; --cornice-linea:#2c2c39;
  --cornice-pallino:#3a3a48; --cornice-testo:#a4a4b4;
  --cornice-bordo:color-mix(in srgb,#2f2f3a 16%,transparent);
  --larghezza:1120px;
  --larghezza-testo:66ch;
  --passo:clamp(56px,7vw,104px);   /* aria sopra e sotto ogni sezione */
}

/* Tema scuro AUTOMATICO: si accende se il Mac (o il telefono) è impostato scuro
   e la persona non ha scelto niente a mano sul sito. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --accent:#45c2bd;        --accent-soft:color-mix(in srgb,#45c2bd 22%,#191922);
  --accent-bright:#6fd8d2; --accent-bright-soft:color-mix(in srgb,#6fd8d2 18%,#191922);
  --ground:#101017; --surface:#191922; --surface-2:#21212c; --sunken:#21212c;
  --ink:#e9e9f0; --ink-strong:#f6f6fa; --ink-2:#a4a4b4; --ink-3:#8e8e9e;
  --line:#2f2f3d; --line-soft:#262631;
  --link:#5fd0ca; --link-soft:color-mix(in srgb,#9db6ff 22%,#191922);
  /* ⚠ GLI INCHIOSTRI DELLE PASTIGLIE VANNO RIDICHIARATI ANCHE QUI. Fino al
     27 agosto 2026 questo blocco ridefiniva --ok/--warn/--bad ma NON i loro
     --*-ink, che restavano quelli del tema chiaro: inchiostro scuro sopra un
     fondo scuro tinto. Misurato in pagina: 3,15 · 3,17 · 3,27 contro il 4,5
     richiesto. E il difetto colpiva solo chi NON tocca l'interruttore, cioe'
     quasi tutti: con la scelta a mano il blocco qui sotto li ridichiarava. */
  --ok:#57cc6e;   --ok-ink:#57cc6e;   --ok-bg:color-mix(in srgb,#4cc27f 22%,#191922);
  --warn:#f0a244; --warn-ink:#f0a244; --warn-bg:color-mix(in srgb,#f0a244 22%,#191922);
  --bad:#ff7a72;  --bad-ink:#ff7a72;  --bad-bg:color-mix(in srgb,#ff7a72 20%,#191922);
  --ok-su-tinta:#8ee0a0;  --bad-su-tinta:#ff8f88;
  --idle:#a4a4b4; --idle-bg:color-mix(in srgb,#a4a4b4 18%,#191922);
  --info:#74b6f5; --info-ink:#74b6f5; --info-bg:color-mix(in srgb,#74b6f5 22%,#191922);
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.4);
  --shadow:0 1px 3px 0 rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
  --su-accento:#101017;
  /* ⚠ IL GRADIENTE DEL MARCHIO VA RIDICHIARATO ANCHE QUI, e su RegiaPro non
     lo era: al buio il testo dei pulsanti diventa scuro (--su-accento), e
     testo scuro sopra un verde scuro non si legge. Qui il gradiente si
     schiarisce insieme al tema, così il contrasto regge in tutti e due i casi. */
  --logo-gradient:linear-gradient(135deg,#45c2bd,#6fd8d2);
}}

/* Tema scuro SCELTO A MANO con il pulsante in alto a destra.
   Ripete gli stessi valori del blocco qui sopra: serve perché la scelta a mano
   deve vincere anche quando il computer è impostato chiaro. */
:root[data-theme="dark"]{
  --accent:#45c2bd;        --accent-soft:color-mix(in srgb,#45c2bd 22%,#191922);
  --accent-bright:#6fd8d2; --accent-bright-soft:color-mix(in srgb,#6fd8d2 18%,#191922);
  --ground:#101017; --surface:#191922; --surface-2:#21212c; --sunken:#21212c;
  --ink:#e9e9f0; --ink-strong:#f6f6fa; --ink-2:#a4a4b4; --ink-3:#8e8e9e;
  --line:#2f2f3d; --line-soft:#262631;
  --link:#5fd0ca; --link-soft:color-mix(in srgb,#9db6ff 22%,#191922);
  --ok:#57cc6e;   --ok-ink:#57cc6e;   --ok-bg:color-mix(in srgb,#4cc27f 22%,#191922);
  --warn:#f0a244; --warn-ink:#f0a244; --warn-bg:color-mix(in srgb,#f0a244 22%,#191922);
  --bad:#ff7a72;  --bad-ink:#ff7a72;  --bad-bg:color-mix(in srgb,#ff7a72 20%,#191922);
  --ok-su-tinta:#8ee0a0;  --bad-su-tinta:#ff8f88;
  --idle:#a4a4b4; --idle-bg:color-mix(in srgb,#a4a4b4 18%,#191922);
  --info:#74b6f5; --info-ink:#74b6f5; --info-bg:color-mix(in srgb,#74b6f5 22%,#191922);
  --shadow-sm:0 1px 3px 0 rgba(0,0,0,.4);
  --shadow:0 1px 3px 0 rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.55);
  --shadow-lg:0 24px 48px -16px rgba(0,0,0,.7);
  color-scheme:dark;
  --su-accento:#101017;
  --logo-gradient:linear-gradient(135deg,#45c2bd,#6fd8d2);
}