/* ==========================================================================
   VARIABLES — At Home
   Design token del progetto: colori, tipografia, spaziatura, layout.
   Tutte le custom property vivono in :root e sono l'unica fonte di verità.
   Non usare valori hardcoded nei componenti: usa sempre var().
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     COLORI
     Palette ispirata ai materiali e ai toni della laguna veneziana.
     ------------------------------------------------------------------------ */
  --colore-pietra: #F0EEEA;    /* Testo chiaro, contrasto su scuro */
  --colore-laguna: #D8D4CE;    /* Testo primario (tema scuro) */
  --colore-intonaco: rgba(255, 255, 255, 0.1); /* Bordi su sfondo scuro */
  --colore-salvia: #7A8C7E;    /* Accenti secondari, label, icone */
  --colore-vetro: #8FADB0;     /* CTA, hover, link attivi */

  /* Alias semantici — riferimenti d'uso per i componenti */
  --colore-sfondo: #0C1619;
  --colore-testo: var(--colore-laguna);
  --colore-bordo: var(--colore-intonaco);
  --colore-accento: var(--colore-salvia);
  --colore-azione: var(--colore-vetro);
  /* Sfondo delle sezioni — chiaramente distinto dal body per contrasto percepibile */
  --colore-bg-scuro: #1F3035;
  /* Sfondo unificato per tutte le sezioni di contenuto. */
  --colore-bg-seczione: var(--colore-bg-scuro);
  /* Sfondo card — livello intermedio tra body e sezione */
  --colore-bg-card: #162226;

  /* ------------------------------------------------------------------------
     TIPOGRAFIA — Famiglie e pesi
     Display serif per titoli e brand, sans geometrico per testo e UI.
     ------------------------------------------------------------------------ */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;

  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;

  /* ------------------------------------------------------------------------
     TIPOGRAFIA — Scala dimensionale
     Coppie desktop/mobile dove la dimensione cambia in modo responsive.
     ------------------------------------------------------------------------ */
  --dim-brand: 1.125rem;       /* Brand name — 18px */

  --dim-h1: 3.75rem;           /* H1 hero desktop — 60px */
  --dim-h1-mobile: 2.5rem;     /* H1 hero mobile — 40px */

  --dim-h2: 2.25rem;           /* H2 desktop — 36px */
  --dim-h2-mobile: 1.75rem;    /* H2 mobile — 28px */

  --dim-h3: 1.375rem;          /* H3 — 22px */

  --dim-body: 1.0625rem;       /* Body — 17px */
  --dim-label: 0.8125rem;      /* Label/UI — 13px */

  /* ------------------------------------------------------------------------
     TIPOGRAFIA — Line-height
     ------------------------------------------------------------------------ */
  --interlinea-stretta: 1.1;   /* Titoli hero */
  --interlinea-titolo: 1.2;    /* Titoli secondari */
  --interlinea-base: 1.5;      /* Default */
  --interlinea-corpo: 1.75;    /* Testo di lettura lungo */

  /* ------------------------------------------------------------------------
     TIPOGRAFIA — Letter-spacing
     ------------------------------------------------------------------------ */
  --spaziatura-brand: 0.15em;  /* Brand name */
  --spaziatura-label: 0.1em;   /* Label/UI uppercase */

  /* ------------------------------------------------------------------------
     SPAZIATURA
     Scala usabile per padding, margin e gap. Valori reali, non moltiplicatori.
     ------------------------------------------------------------------------ */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2.5rem;    /* 40px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */

  /* ------------------------------------------------------------------------
     LAYOUT
     Larghezze massime e padding dei contenitori.
     ------------------------------------------------------------------------ */
  --max-width-content: 1200px;       /* Larghezza massima contenuto */
  --max-width-narrow: 760px;         /* Testo narrativo */
  --container-padding: 1.5rem;       /* Padding laterale mobile */
  --container-padding-desktop: 3rem; /* Padding laterale desktop */

  /* ------------------------------------------------------------------------
     BORDI E RAGGI
     ------------------------------------------------------------------------ */
  --radius-sm: 2px;   /* Input, bottoni piccoli */
  --radius-md: 4px;   /* Bottoni, elementi UI */
  --radius-base: var(--radius-md);
  --radius-lg: 12px;  /* Card, immagini */

  --border-standard: 1px solid var(--colore-intonaco);

  /* ------------------------------------------------------------------------
     TRANSIZIONI
     ------------------------------------------------------------------------ */
  --transition-base: 0.2s ease;
  --transition-slow: 0.4s ease;

  /* ------------------------------------------------------------------------
     Z-INDEX
     Ordine di sovrapposizione coerente per l'intero sito.
     ------------------------------------------------------------------------ */
  --z-overlay: 50;
  --z-header: 100;
  --z-modal: 200;
}