/*
 * Il sistema visivo di ublik.it, in un file solo.
 *
 * Colori, tipografia, spaziature, raggi, ombre: ogni blocco usa solo queste
 * variabili, e nessun blocco scrive un colore o una misura per conto suo.
 * Direzione dal prototipo della home (agosto 2026): Archivo per il testo,
 * JetBrains Mono per etichette e numeri, indigo come accento, verde e ambra
 * per gli stati, niente tema scuro.
 *
 * Regole anti-copia (vincolo, non gusto):
 * - nessun blocco deve somigliare a un template: niente griglie di tre card
 *   con icona-titolo-testo, niente "hero" con sfumature viola e mockup 3D,
 *   niente sezioni "trusted by" con loghi;
 * - le finestre mostrano il prodotto vero (scatti dell'azienda demo), mai
 *   illustrazioni astratte;
 * - le etichette in mono in maiuscolo con la lineetta prima (`.occhiello`)
 *   sono il segno ricorrente del sito: si usano lì e basta.
 */
:root {
  /* colori */
  --fondo: #F7F6FB;
  --pannello: #FFFFFF;
  --pannello-2: #F1EFF8;
  --bordo: rgba(22, 20, 31, 0.08);
  --bordo-vivo: rgba(22, 20, 31, 0.16);
  --testo: #16141F;
  --testo-2: #5A5470;
  --testo-3: #8B8798;
  --accento: #7B61FF;
  --accento-scuro: #6A50E8;
  --accento-velo: rgba(123, 97, 255, 0.10);
  --verde: #1FA46B;
  --verde-testo: #0A2A1C;
  --ambra: #C97E12;
  --rosso: #E14B44;

  /* tipografia */
  --font-testo: 'Archivo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --corpo: 16px;
  --corpo-grande: 17px;
  --corpo-piccolo: 14.5px;
  --etichetta: 12px;
  --interlinea: 1.6;
  --larghezza-titoli: 112;      /* font-variation 'wdth' dei titoli */
  --larghezza-testo: 100;

  /* spazi */
  --spazio-1: 8px;
  --spazio-2: 14px;
  --spazio-3: 22px;
  --spazio-4: 36px;
  --spazio-5: 64px;
  --sezione: 110px;
  --contenitore: 1180px;
  --bordo-pagina: 28px;

  /* raggi e ombre */
  --raggio: 10px;
  --raggio-grande: 16px;
  --raggio-pillola: 99px;
  --ombra-finestra: 0 24px 60px rgba(22, 20, 31, 0.10), 0 0 0 1px rgba(123, 97, 255, 0.05);
  --ombra-bottone: 0 6px 28px rgba(123, 97, 255, 0.35);

  /* movimento */
  --curva: cubic-bezier(.2, .7, .3, 1);
  --veloce: .2s;
  --medio: .45s;
}