/* ==========================================================================
   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 (token Figma) ---------- */
  --color-green: #0099cd; /* Primitives/0099CD — colore primario */
  --color-green-dark: #007da7; /* derivato, per gli stati hover */
  --color-blue: #205181; /* Primitives/205181 — colore secondario */
  --color-blue-dark: #11416d;
  --color-yellow: #fdce46; /* badge in evidenza */

  /* ---------- 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;
}