/* =========================================================================
   Strato del sito — token che l'app non ha
   -------------------------------------------------------------------------
   Mario, 6 ottobre 2026: il sito può avere un suo strato SOPRA quello
   dell'app (carattere dei titoli, fondi, colori di sfondo), purché le
   schermate del prodotto restino identiche all'app.

   Regola: qui non si scrivono colori nuovi a mano. Ogni tinta è RICAVATA dai
   token dell'app (css/tokens.css) con color-mix, così se l'app cambia il blu
   il sito lo segue. Si carica DOPO tokens.css.

   ⚠️ I grigi (e il nero, il bianco, il trasparente) si mescolano in srgb, mai
   in oklch: Chrome butta la loro tinta fredda e il risultato vira al rosa
   (misurato l'11 ottobre: la scritta del piede veniva 228,226,227). L'oklch
   resta per le tinte vere: blu, verde, ambra, viola.

   L'IDEA DEL SITO (Mario, 11 ottobre 2026): il grigio è il problema, il
   colore è Smistant. «Com'è oggi» resta grigio; quello che fa Smistant e chi
   lo usa stanno su campi di colore pieni (--campo-*).
   IL BLU È SOLO DEL BOTTONE (Mario, 11 ottobre, secondo giro: «troppi colori,
   tre o quattro celesti»): nessun fondo, campo o tinta del sito è blu. I campi
   sono tre, le tinte delle pillole degli incarichi dell'app senza il blu:
   verde, viola, ambra, una tonalità ciascuna.
   ========================================================================= */

:root {
  /* ---- Carattere del sito ------------------------------------------------
     Funnel Display per i titoli, Funnel Sans per il testo (Mario, 11 ottobre
     2026: Geist era il carattere di mezza internet). Le schermate del
     prodotto restano sul carattere di sistema (--font-sans), come l'app vera. */
  --sito-font: "Funnel Sans", var(--font-sans);
  --sito-font-titoli: "Funnel Display", var(--sito-font);
  /* Titoli grandi, stretti, a sinistra (riferimento Clay) */
  --sito-titolo-1: clamp(2.6rem, 1rem + 4vw, 5.4rem);
  --sito-titolo-2: clamp(2.1rem, 1.1rem + 2.6vw, 4rem);
  --sito-titolo-3: clamp(1.6rem, 1.25rem + 1vw, 2.25rem);
  --sito-peso-titolo: 600;
  --sito-crenatura: -0.035em;

  /* ---- Fondi ---- */
  --sito-fondo: var(--color-surface);
  /* Il grigio: lo stesso del binario dell'app (`--seg-track-bg`). Nel sito è
     il colore del problema («com'è oggi») e del piè di pagina. Era spostato
     verso l'ambra e leggeva beige, fuori palette (Mario, 11 ottobre 2026). */
  --sito-fondo-grigio: var(--color-bg);

  /* ---- I campi: il colore di Smistant -------------------------------------
     Le tinte del sito, chiare ma piene, tutte sulla stessa chiarezza.
     ⚠️ Sopra si scrive con --color-ink (7,3–8,8:1, misurato l'11 ottobre);
     --color-ink-soft sta a 4,6:1: al limite, non si usa. I rimandi alle
     pagine dedicate sono bottoni scuri (.btn--scuro), non link blu. Ricavate dai token col colore relativo: stessa tinta
     del token, luce e pienezza fissate. */
  --campo-verde: oklch(from var(--tinta-verde) 0.88 0.13 h);
  --campo-ambra: oklch(from var(--tinta-ambra) 0.87 0.12 h);
  --campo-viola: oklch(from var(--color-neutral-accent) 0.84 0.08 h);
  /* Il palco (copertina, «Con Smistant», chiusura): lo scuro di Smistant, ma
     quello morbido delle schede della notte, non il quasi nero del fondo
     (Mario, 11 ottobre: «un po' cupo»; il riquadro della sicurezza gli
     piaceva). Il video bianco stacca e il bottone blu resta l'unico blu. */
  --palco: var(--sito-notte-scheda);

  /* ---- Le tinte "a fumetto" (mascotte) ----------------------------------
     Una per settore: agenzie viola, hotel verde, gruppi ambra. Danno anche la
     tinta ai campi (--campo-*). */
  --tinta-viola: var(--color-neutral-accent);
  /* Verde e ambra: la tinta del token con più luce. Mescolati col giallo
     venivano olivastri e marroni (11 ottobre 2026). */
  --tinta-verde: oklch(from var(--color-success) 0.7 0.19 h);
  --tinta-ambra: oklch(from var(--color-warn) 0.75 0.16 h);

  /* ---- La notte: il fondo scuro della parte agentica (Circe e Lypso) ------
     Mario, 8 ottobre 2026: passando da Smistant Base agli agenti il fondo va
     dal bianco allo scuro e poi torna bianco, come sul sito di Superia. Non è
     nero puro (DESIGN.md: mai nero): è il grigio scuro del visore dell'app,
     abbassato ancora. Testi e bordi sono quelli del visore. */
  /* In sRGB, non in oklch: il nero non ha tinta, e in oklch il risultato
     perde quella del visore e vira al rosso. */
  --sito-notte: color-mix(in srgb, var(--color-visore-bg) 62%, black);
  --sito-notte-scheda: color-mix(in srgb, var(--color-visore-bg) 85%, black);
  --sito-notte-bordo: color-mix(in srgb, var(--color-visore-border) 70%, var(--sito-notte));
  --sito-notte-titolo: var(--color-surface);
  --sito-notte-testo: var(--color-visore-ink);
  --sito-notte-spento: var(--color-visore-muted);
  /* La tinta di ciascun agente sul fondo scuro: Circe come le agenzie
     (viola), Lypso come gli hotel (verde). Sono i loro campi: niente tonalità
     in più. */
  --tinta-circe: var(--campo-viola);
  --tinta-lypso: var(--campo-verde);

  /* Il testo spento delle voci non attive (riferimento Wispr Flow). */
  --sito-spento: color-mix(in srgb, var(--color-muted-soft) 70%, white);

  /* ---- Forme del sito ----
     Il sito è più morbido dell'app: campi di colore a 40, schede a 24. I
     bottoni restano a --radius-btn, come nel prodotto. */
  --sito-r-campo: 40px;
  --sito-r-scheda: 24px;
  --sito-r-tessera: 26px;
  --sito-r-barra: 16px;

  /* ---- Movimento ----
     Una molla morbida per gli allargamenti (schede) e lo scatto (prodotto). */
  --sito-molla: cubic-bezier(0.22, 1, 0.36, 1);
  --sito-allarga: 650ms;

  /* La freccia dei bottoni che portano a un'altra pagina (arrow-right di lucide,
     il set dell'app). È una maschera: prende il colore del testo del bottone. */
  --sito-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");

  /* La X delle cose che oggi non vanno (Mario, 12 ottobre: il segno «✕» si leggeva poco). È la x
     di lucide, più spessa; una maschera anche lei, prende il colore che le si dà. */
  --sito-croce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");

  /* La freccia curva fra i passi di un percorso (Mario, 12 ottobre: «frecce più carine»):
     un arco con la punta, come tracciato a mano. Anche lei è una maschera, 48×32. */
  --sito-freccia-curva: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 24C13 8 29 4 42 14'/%3E%3Cpath d='M38.9 5.6 42 14l-8.9-1.5'/%3E%3C/svg%3E");

  /* Grana: rumore in scala di grigi, si appoggia su qualunque tinta. */
  --sito-grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}