/* =============================================================
   VARIABILI DEL SITO
   Tutti i valori di colore, font, spazi, angoli e ombre stanno qui.
   Regola: nel resto del CSS non si scrivono mai valori "a mano".
   ============================================================= */

/* -------------------------------------------------------------
   PALETTE — Cantiere classica (scelta da Federico l'8/10/2026)
   ------------------------------------------------------------- */
:root {
  --color-primary: #0A0A0A;      /* nero */
  --color-secondary: #F59E0B;    /* giallo cantiere */
  --color-accent: #FFFFFF;
  --color-bg: #FAFAFA;
  --color-text: #0A0A0A;
  --color-muted: #525252;

  /* Derivati: servono per leggibilità, non sono colori "nuovi" */
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: #D4D4D4;
  --color-on-secondary: #0A0A0A;        /* il giallo vuole testo nero */
  --color-secondary-ink: #92400E;       /* ambra scuro, leggibile su chiaro */
  --color-surface: #F0F0F0;
  --color-border: #E5E5E5;
  --color-tbc-bg: #FEF3C7;     /* etichetta [da confermare]: giallo chiaro */
  --color-tbc-ink: #422006;    /* testo scuro sull'etichetta */
}

:root {
  /* -----------------------------------------------------------
     FONT — una sola coppia in tutto il sito
     ----------------------------------------------------------- */
  --font-heading: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Scala dei testi (mobile -> desktop) */
  --text-sm: 0.875rem;                          /* 14px */
  --text-base: 1.0625rem;                       /* 17px */
  --text-lg: 1.25rem;                           /* 20px */
  --text-xl: 1.5rem;                            /* 24px */
  --text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);       /* titoli di sezione */
  --text-3xl: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);     /* titolo pagine interne */
  --text-display: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); /* titolo hero home */
  --text-h3-lg: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);/* sottotitoli grandi (passi) */
  --text-data: clamp(2.75rem, 2.2rem + 2vw, 4rem);     /* cifre grandi (requisiti, passi) */

  --leading-tight: 1.1;
  --leading-snug: 1.5;
  --leading-normal: 1.6;

  /* -----------------------------------------------------------
     SPAZI — solo multipli di 8px (più un 4px per i dettagli)
     ----------------------------------------------------------- */
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 120px;

  /* Spazio verticale tra le sezioni */
  --section-space: var(--space-6);

  /* -----------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------- */
  --container-max: 1200px;
  --gutter: var(--space-2);
  --header-height: 72px;

  /* Intestazione nera: il logo ufficiale è pensato per stare su fondo nero */
  --color-header: #000000;
  --color-on-header: #FFFFFF;
  --color-header-line: rgb(255 255 255 / 0.18);

  /* -----------------------------------------------------------
     ANGOLI E OMBRE — un solo valore ciascuno
     ----------------------------------------------------------- */
  --radius: 4px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.08);

  /* Animazioni: brevi e solo su colori/bordi */
  --transition: 150ms ease;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-4);
    --section-space: var(--space-7);
  }
}