/* ==========================================================================
   Design token — Vinci una Casa
   Valori estratti dal file Figma "Landing page Concorso 2027".
   Unico punto in cui si modificano colori, spazi, tipografia e ombre.

   NOTA: i breakpoint NON possono stare qui come var(): le media query
   non leggono le custom property. Sono elencati come commento e vanno
   scritti in chiaro in style.css.
     - mobile   : < 640px  (default, mobile first)
     - tablet   : >= 640px
     - desktop  : >= 1024px
     - large    : >= 1280px
   ========================================================================== */

/* ---------- Font Lato (SIL Open Font License, vedi assets/font/OFL.txt) ----------
   Tre soli pesi: Regular per i testi, Bold per etichette e bottoni,
   Black per i titoli. `font-display: swap` evita la pagina vuota in attesa
   del font: il testo compare subito con il fallback di sistema. */
@font-face {
  font-family: "Lato";
  src: url("../font/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../font/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../font/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colori brand ----------
     Due sole tinte di base. Tutto il resto e derivato da queste ruotando
     solo la luminosita in HSL: la tonalita e la saturazione restano identiche,
     cosi gli stati di un bottone sembrano lo stesso colore piu o meno acceso
     e non un colore diverso.

     Primario  #215181 → hsl(210, 59%, 32%)
     Secondario #509392 → hsl(179, 30%, 45%) */

  /* Primario — blu */
  --color-primary: #215181; /* base: fondi pieni, titoli, link */
  --color-primary-hover: #1a4066; /* -7% luminosita — hover */
  --color-primary-active: #153351; /* -12% — pressione/attivo */
  --color-primary-subtle: #dfebf7; /* fondo tenue per box e badge */
  --color-primary-border: #a8c4e0; /* bordi e separatori sul tenue */

  /* Secondario — verde acqua */
  --color-secondary: #509392; /* base: fondi pieni, accenti */
  --color-secondary-hover: #407777; /* -9% luminosita — hover */
  --color-secondary-active: #366564; /* -14% — pressione/attivo */
  --color-secondary-subtle: #e5f1f1; /* fondo tenue */
  --color-secondary-border: #b4d3d2;

  /* Variante scura del secondario. Il #509392 pieno con testo bianco si ferma
     a 3.5:1, sotto la soglia WCAG AA per il testo normale: regge solo il testo
     grande. Questa versione arriva a 6:1: e quindi la tinta da usare ovunque
     il verde faccia da colore di testo o da fondo pieno sotto del testo — nelle
     pagine legali e cosi per link e lettere delle finalita. Il --color-secondary
     pieno vale per accenti, bordi e forme senza testo sopra: e il caso del
     cerchio nelle mappe regionali. */
  --color-secondary-deep: #396a69;

  /* Versione accesa del secondario: stessa tonalita, saturazione quasi
     raddoppiata e luminosita alzata — hsl(179, 50%, 55%). Serve dove il
     colore deve farsi notare in risposta a un gesto, come l'hover dei
     bottoni chiari sulle sezioni blu. Vuole testo scuro sopra, non bianco. */
  --color-secondary-bright: #53c6c4;

  --color-yellow: #fdce46; /* badge in evidenza */
  --color-yellow-hover: #f0bb1f;

  /* Testo da posare sopra i fondi pieni */
  --color-on-primary: #ffffff; /* 8.2:1 su --color-primary */
  --color-on-secondary: #ffffff; /* 6:1 su -deep, 3.5:1 sul secondario pieno */

  /* ---------- Colori neutri ---------- */
  --color-ink: #1c1c1a; /* testo principale e sfondo del footer */
  --color-ink-soft: #6b6a66; /* testo secondario */
  --color-white: #ffffff;
  --color-footer-text: #bfc6d5; /* link e note nel footer */
  --color-border: rgba(255, 255, 255, 0.15);

  /* ---------- Alias semantici ---------- */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-bg: var(--color-white);

  /* ---------- Tipografia ----------
     Lato con fallback di sistema: se i file font non sono ancora disponibili
     la pagina resta leggibile e la struttura non si sposta. */
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);

  /* Scala fluida: il valore minimo vale su mobile, il massimo dal desktop in su.
     I massimi corrispondono alle dimensioni del file Figma. */
  --text-xs: 0.6875rem; /* 11px — copyright */
  --text-sm: 0.75rem; /* 12px — badge, note legali */
  --text-base: 0.875rem; /* 14px — link footer */
  --text-md: 0.9375rem; /* 15px — testo delle card */
  --text-lg: 1rem; /* 16px — bottoni, testo box estrazione */
  --text-xl: 1.125rem; /* 18px — testi introduttivi */
  --text-2xl: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); /* 22px — titoli card */
  --text-3xl: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); /* 24px — titoli card premio */
  --text-4xl: clamp(1.5rem, 1.15rem + 1.7vw, 2rem); /* 32px — titoli sezione minori */
  --text-5xl: clamp(1.75rem, 1.2rem + 2.7vw, 2.5rem); /* 40px — titoli sezione */

  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;

  --tracking-wide: 0.04em; /* etichette maiuscole */

  /* ---------- Spaziature (scala 4px) ---------- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ---------- Layout ----------
     Nel file Figma la pagina e larga 1440px con margini laterali di 80px
     (sezioni) e 100px (hero e footer): il contenuto utile e 1280px. */
  --container-max: 1280px;
  --container-narrow: 1040px;
  --container-text: 800px;
  --container-padding: var(--space-md);

  /* ---------- Bordi e ombre ---------- */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 40px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.14);
  --shadow-card: 0 8px 24px rgb(28 28 26 / 0.08);

  /* ---------- Transizioni ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---------- Livelli di sovrapposizione ---------- */
  --z-base: 1;
  --z-raised: 2;
  --z-header: 100;
  --z-overlay: 200;
}