/* Gravity — token del sistema.
   Scala di grigi e materiali allineati a Vercel Ship: fondo nero pieno su tutta la
   pagina, un solo testo chiaro, bordi appena percettibili. Nessun tema chiaro,
   nessuna sezione che cambia colore. L'unico colore resta l'ultravioletto: nelle
   particelle perturbate, nel focus, nel numero del progetto acceso e nella colonna
   Gravity del confronto. */

:root {
  /* ------------------------------------------------------------- superfici */
  --gv-black: #000000;
  --gv-bg: #000000;
  --gv-surface: #0a0a0a;
  --gv-surface-raised: #101010;

  /* ------------------------------------------------- testo, scala Vercel */
  --gv-text: #ededed; /* gray-1000 */
  --gv-text-muted: #a1a1a1; /* gray-900 */
  --gv-text-dim: #878787; /* gray-600 */
  --gv-text-faint: #575757;
  --gv-text-ghost: #3d3d3d;

  /* ----------------------------------------------------------------- bordi */
  --gv-line: #1f1f1f; /* gray-200 */
  --gv-line-mid: #292929; /* gray-300 */
  --gv-line-strong: #2e2e2e; /* gray-400 */

  /* ------------------------------------------------------------- accento */
  /* Inchiostro della resa a pixel dell'hero: bianco pieno, come i blocchi del carattere. */
  --gv-hero-pixel: #ffffff;

  --gv-accent: #8b5cf6;
  --gv-accent-deep: #5300b8;
  --gv-focus: #8b5cf6;

  /* --------------------------------------------------------------- font */
  /* Due caratteri in tutto. Geist Pixel Circle, a pallini, solo per gli H1. Instrument
     Sans per tutto il resto: titoli di sezione, titoli delle voci, testi, etichette,
     numeri e bottoni. Arriva da Google Fonts, variabile in peso e larghezza. */
  --gv-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gv-font-pixel: "Geist Pixel Circle", "Departure Mono", ui-monospace, monospace;

  /* ------------------------------------------------------------ tipografia
     Scala nata da Vercel Ship, letta dalla pagina a 390, 768, 1024, 1280 e 1440px, poi
     rifatta sui due caratteri. Corpi fissi che cambiano a gradini, mai fluidi. Qui i
     valori dei telefoni; più sotto i gradini a 640, 1000, 1200 e 2120px. */
  --gv-type-display: 48px; /*    H1 in Pixel Circle */
  --gv-type-heading: 32px; /*    H2 di sezione e CTA finale */
  --gv-type-title: 24px; /*      H3: schede, passaggi, domande */
  --gv-type-body: 15px; /*       testo corrente */
  --gv-type-label: 13px; /*      etichette, navbar, collegamenti, footer */
  /* Tag, note e contatori hanno lo stesso corpo delle etichette: si distinguono per colore. */
  --gv-type-small: var(--gv-type-label);
  /* Il valore di un numero e il bottone primario hanno il corpo del titolo di una voce. */
  --gv-type-stat: var(--gv-type-title);
  --gv-type-button: var(--gv-type-title);

  --gv-type-display-tracking: -0.06em;
  --gv-type-heading-tracking: -0.03em;
  --gv-type-title-tracking: -0.02em;
  --gv-type-stat-tracking: -0.03em;
  --gv-type-button-tracking: -0.02em;
  --gv-type-label-tracking: 0.06em;
  /* Le etichette maiuscole usano la larghezza stretta di Instrument Sans: hanno un'aria
     tecnica senza bisogno di un carattere mono. */
  --gv-type-label-stretch: 88%;

  --gv-leading-none: 1; /*       pixel */
  --gv-leading-heading: 1.04; /* titoli di sezione */
  --gv-leading-title: 1.12; /*   titoli delle voci */
  --gv-leading-body: 1.6; /*     testo corrente */
  --gv-leading-label: 1.5; /*    etichette */

  /* Pesi: Pixel Circle a 500; Instrument Sans a 400 per i testi, a 500 per titoli,
     etichette, numeri e bottoni. Nient'altro. */

  /* ------------------------------------------------------ spazio e griglia
     Nessun contenitore centrato: la pagina occupa tutta la larghezza e
     respira con il solo padding laterale, come su Vercel Ship. */
  --gv-pad: 24px;
  --gv-gutter: 20px;
  /* Misura del testo corrente, fino a dove arriva una riga. Sotto i 1200px tutta la
     larghezza del contenuto; da 1200px due delle quattro colonne della griglia delle
     schede, così i testi sotto i titoli finiscono su una linea della griglia. */
  --gv-measure: 100%;
  --gv-section-top: 72px;
  --gv-section-bottom: 96px;
  --gv-nav-height: 72px;

  --gv-space-1: 4px;
  --gv-space-2: 8px;
  --gv-space-3: 16px;
  --gv-space-4: 24px;
  --gv-space-5: 32px;
  --gv-space-6: 40px;
  --gv-space-7: 48px;
  --gv-space-8: 64px;
  --gv-space-9: 80px;
  --gv-space-10: 96px;
  --gv-space-11: 128px;

  /* --------------------------------------------------- forme e materiali */
  /* Tutto squadrato: nessun raggio in nessuna superficie. Le schede si riconoscono
     dal materiale e dal bordo, non dagli angoli. */
  --gv-radius-card: 0px;
  --gv-radius-media: 0px;
  --gv-radius-control: 0px;
  --gv-border: 1px;
  --gv-touch: 48px;

  /* Angoli tagliati del bottone pixel: stessa costruzione del primario di
     Vercel Ship, un quadrato con i quattro angoli rientrati. */
  --gv-notch: 12px;

  /* Materiale unico di tutte le schede del sito: un velo chiaro e una sfocatura
     di cio' che ci passa dietro, pioggia di pixel compresa. */
  --gv-frost-bg: rgba(255, 255, 255, 0.035);
  --gv-frost-filter: blur(18px) saturate(140%);

  --gv-dur-hover: 150ms;
  --gv-dur-ui: 200ms;
  --gv-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --gv-transition-hover: color var(--gv-dur-hover) var(--gv-ease),
    background-color var(--gv-dur-hover) var(--gv-ease),
    border-color var(--gv-dur-hover) var(--gv-ease),
    opacity var(--gv-dur-hover) var(--gv-ease);

  color-scheme: dark;
}

/* Tablet: il titolo dell'hero cresce, testo ed etichette pure. */
@media (min-width: 640px) {
  :root {
    --gv-type-display: 72px;
    --gv-type-body: 16px;
    --gv-type-label: 14px;
  }
}

@media (min-width: 768px) {
  :root {
    --gv-pad: 40px;
    --gv-gutter: 20px;
    --gv-section-top: 96px;
    --gv-section-bottom: 144px;
    --gv-nav-height: 88px;
    --gv-notch: 14px;
  }
}

/* Desktop: titoli delle voci a 32 e titoli di sezione a 48.
   Ship da 1200px li porta a 72, qui restano a 48 fino a 2120px: il titolo dell'hero su
   una riga sta fra i 48 e i 90px, e titoli di sezione a 72 lo raggiungerebbero. */
@media (min-width: 1000px) {
  :root {
    --gv-type-heading: 48px;
    --gv-type-title: 32px;
  }
}

/* Da 1200px l'hero sta su una riga, al corpo che ci entra e al massimo a 96. Prima
   resta su tre righe a 72: su una riga scenderebbe sotto i 48 dei titoli di sezione. */
@media (min-width: 1200px) {
  :root {
    --gv-type-display: 96px;
    --gv-pad: 64px;
    --gv-measure: calc((100vw - 2 * var(--gv-pad) - var(--gv-gutter)) / 2);
    --gv-section-top: 100px;
    --gv-section-bottom: 192px;
    --gv-nav-height: 92px;
    --gv-notch: 16px;
  }
}

/* Schermi molto larghi: da 2120px l'hero su una riga supera i 90px, e i titoli di
   sezione passano a 72 come su Ship restando almeno un quinto più piccoli. A 48 su
   una pagina così larga si perdevano. */
@media (min-width: 2120px) {
  :root {
    --gv-type-heading: 72px;
  }
}