/* Tema: colori, font, raggi e spaziature in variabili.
   Basato sul Design System Studio Martino (tema scuro).
   Per cambiare l'aspetto basta modificare questo file. */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/dm-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/dm-sans-latin-600-normal.woff2') format('woff2'); }

:root {
  /* Colori del design system */
  --navy: #0D1F3C;
  --navy-deep: #081528;
  --navy-hover: #1A3060;
  --azure: #4DC8E8;
  --azure-hover: #6DD5EF;
  --white: #FFFFFF;
  --testo-secondario: rgba(255, 255, 255, 0.60);
  --testo-terziario: rgba(255, 255, 255, 0.72);
  --bordo: rgba(255, 255, 255, 0.12);
  --bordo-forte: rgba(255, 255, 255, 0.45);
  --superficie: rgba(255, 255, 255, 0.04);
  --velo: rgba(8, 21, 40, 0.55);

  /* Eccezione Halloween: solo per l'allarme */
  --zucca: #FF7A1A;
  --zucca-testo: #0D1F3C;

  /* Tipografia */
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --testo-hero: clamp(34px, 9.5vw, 44px);
  --testo-titolo: clamp(26px, 7vw, 30px);
  --testo-corpo: 16px;
  --testo-grande: 19px;
  --testo-eyebrow: 12px;
  --testo-nota: 13px;
  --tracking-hero: -0.03em;
  --tracking-titolo: -0.02em;
  --tracking-eyebrow: 0.10em;

  /* Forme */
  --raggio-pillola: 980px;
  --raggio-card: 16px;
  --raggio-input: 12px;
  --raggio-icona: 10px;

  /* Spaziature (griglia a 4px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* Movimento */
  --transizione-btn: filter 0.18s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

  color-scheme: dark;
}