/* Token del sito commerciale, versione "Torre di controllo": scena notturna con aurora e vetro.
   Nel resto del CSS si usano solo queste variabili. Valori documentati in DESIGN.md. */

@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/Bricolage-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* scena */
  --bg: #020305;
  --bg-2: #07090C;
  --blob-1: rgb(20 170 200 / .26);   /* ciano, molto tenue */
  --blob-2: rgb(20 120 130 / .16);
  --blob-3: rgb(50 80 200 / .18);

  /* vetro */
  --glass: rgb(14 17 22 / .62);
  --glass-strong: rgb(7 9 12 / .9);
  --glass-edge: rgb(255 255 255 / .11);
  --glass-edge-top: rgb(255 255 255 / .24);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 24px 60px -24px rgb(0 0 0 / .65);
  --glass-blur: 18px;
  --spot: rgb(95 216 230 / .16);
  --mist: rgb(127 160 175 / .12);          /* riempimento tenue di controlli sul vetro */
  --mist-strong: rgb(127 160 175 / .22);   /* hover e selezione */

  /* testo */
  --ink: #EAF1F4;
  --ink-2: #B7C6CD;
  --ink-3: #9DB0BA;

  /* accento e segnale */
  --accent: #3DE6F5;
  --accent-strong: #7CF0FA;
  --on-accent: #00161B;
  --signal: #FFB454;        /* solo la candidatura in movimento e il passo successivo */
  --line: rgb(255 255 255 / .09);
  --line-strong: #7C8B94;

  /* stati */
  --success: #4CC38A;
  --warn: #E9A25B;
  --danger: #F28B82;

  /* forma: pannelli 24, controlli 14, pillole piene */
  --r-panel: 24px;
  --r-control: 14px;
  --r-pill: 999px;

  /* spaziatura: scala base 4 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* tipografia */
  --font-display: "Bricolage", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-display: clamp(2.5rem, 1.2rem + 3.6vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  --fs-h3: 1.25rem;
  --fs-title: 1.5rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;
  --section-y: 112px;
  --measure: 65ch;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --section-y: 72px;
    --header-h: 64px;
    --r-panel: 20px;
  }
}

/* Senza sfocatura di sfondo il vetro diventa un fondo pieno, per leggibilità. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: var(--glass-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--glass-strong); --glass-blur: 0px; }
}