/* ═══════════════════════════════════════════════════════════════════════════
   REGIAPRO — 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)).

   QUANDO ARRIVA LA GRAFICA NUOVA DI GIOVANNI:
   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 VENGONO QUESTI VALORI:
   sono copiati dal design system «Fresh Cloud» già in uso sul CRM di Foto Papini,
   file `~/Downloads/nuova-grafica-fotopapini/fotopapini-design-tokens.css`
   (letto il 24 agosto 2026). I nomi delle variabili sono gli stessi, apposta:
   così il giorno in cui quel file cambia, si può ricopiare senza tradurre niente.

   L'UNICA DIFFERENZA rispetto all'originale: qui NON c'è la riga che scarica il
   carattere Albert Sans da Google. Il motivo è nel documento COME-SI-MODIFICA.md
   (il sito deve funzionare aprendo i file, anche senza internet, senza errori
   nella console). Come rimetterlo quando il sito va online: sempre lì.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── colore (tema chiaro) ── */
  --accent:#0e7038; --accent-soft:color-mix(in srgb,#0e7038 12%,white);
  --accent-bright:#00aa54; --accent-bright-soft:color-mix(in srgb,#00aa54 15%,white);
  --ground:#ededed;          /* sfondo pagina */
  --surface:#fbfbfb;         /* riquadri, schede */
  --surface-2:#f4f4f4;       /* aree incassate, passaggio del mouse */
  --sunken:#f4f4f4;
  --ink:#494949;             /* testo principale */
  --ink-strong:#353535;      /* titoli */
  --ink-2:#5c5c5c;           /* testo secondario */
  --ink-3:#848484;           /* didascalie */
  --line:#dbdbdb;            /* bordi */
  --line-soft:#e8e8e8;
  --link:#1257c9; --link-soft:color-mix(in srgb,#1257c9 12%,white);
  --ok:#0e7038; --ok-bg:color-mix(in srgb,#0e7038 14%,white);
  --warn:#d95b00; --warn-bg:color-mix(in srgb,#d95b00 14%,white);
  --bad:#c0342d; --bad-bg:color-mix(in srgb,#c0342d 12%,white);
  --idle:#5c5c5c; --idle-bg:color-mix(in srgb,#5c5c5c 10%,white);
  --info:#1257c9; --info-bg:color-mix(in srgb,#1257c9 12%,white);
  --logo-gradient:linear-gradient(135deg,#0e7038,#00aa54);

  /* ── 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(32,32,32,.08),0 1px 2px -1px rgba(32,32,32,.08);
  --shadow:0 1px 3px 0 rgba(32,32,32,.08),0 10px 24px -8px rgba(32,32,32,.14);
  --shadow-lg:0 24px 48px -16px rgba(32,32,32,.22);
  --tr:.18s cubic-bezier(.4,0,.2,1);
  color-scheme:light;

  /* ═══ AGGIUNTE PER IL SITO DI PRESENTAZIONE ═══
     Il design system «Fresh Cloud» è nato per il CRM, che è un programma.
     Un sito di presentazione ha bisogno di tre cose in più, e stanno qui
     sotto invece che sparse nel foglio di stile. 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);
  --segnaposto-testo:var(--warn);
  /* le misure del sito */
  --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:#4cc27f; --accent-soft:color-mix(in srgb,#4cc27f 22%,#1c1c18);
  --accent-bright:#6fdc96; --accent-bright-soft:color-mix(in srgb,#6fdc96 18%,#1c1c18);
  --ground:#12120f; --surface:#1c1c18; --surface-2:#23231e; --sunken:#23231e;
  --ink:#ecece8; --ink-strong:#f7f7f4; --ink-2:#a8a8a0; --ink-3:#7d7d76;
  --line:#33332c; --line-soft:#2a2a24;
  --link:#7aa7ff; --link-soft:color-mix(in srgb,#7aa7ff 22%,#1c1c18);
  --ok:#4cc27f; --ok-bg:color-mix(in srgb,#4cc27f 22%,#1c1c18);
  --warn:#ff9b45; --warn-bg:color-mix(in srgb,#ff9b45 22%,#1c1c18);
  --bad:#ff7a72; --bad-bg:color-mix(in srgb,#ff7a72 20%,#1c1c18);
  --idle:#a8a8a0; --idle-bg:color-mix(in srgb,#a8a8a0 18%,#1c1c18);
  --info:#7aa7ff; --info-bg:color-mix(in srgb,#7aa7ff 22%,#1c1c18);
  --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:#12120f;
}}

/* 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:#4cc27f; --accent-soft:color-mix(in srgb,#4cc27f 22%,#1c1c18);
  --accent-bright:#6fdc96; --accent-bright-soft:color-mix(in srgb,#6fdc96 18%,#1c1c18);
  --ground:#12120f; --surface:#1c1c18; --surface-2:#23231e; --sunken:#23231e;
  --ink:#ecece8; --ink-strong:#f7f7f4; --ink-2:#a8a8a0; --ink-3:#7d7d76;
  --line:#33332c; --line-soft:#2a2a24;
  --link:#7aa7ff; --link-soft:color-mix(in srgb,#7aa7ff 22%,#1c1c18);
  --ok:#4cc27f; --ok-bg:color-mix(in srgb,#4cc27f 22%,#1c1c18);
  --warn:#ff9b45; --warn-bg:color-mix(in srgb,#ff9b45 22%,#1c1c18);
  --bad:#ff7a72; --bad-bg:color-mix(in srgb,#ff7a72 20%,#1c1c18);
  --idle:#a8a8a0; --idle-bg:color-mix(in srgb,#a8a8a0 18%,#1c1c18);
  --info:#7aa7ff; --info-bg:color-mix(in srgb,#7aa7ff 22%,#1c1c18);
  --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:#12120f;
}