/* ==========================================================================
   La Nave — Variabili CSS globali
   Palette, tipografia, spaziature e breakpoint di riferimento.
   Vedi design/canva-mockup.pdf per il riferimento visivo completo.
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Colori — palette da CLAUDE.md
     ----------------------------------------------------------------------- */
  --colore-borgogna: #411916;   /* header, footer, sezione prenotazione */
  --colore-terracotta: #C85C3A; /* CTA, accenti, icone */
  --colore-sabbia: #F5EDE8;     /* sezioni alternate */
  --colore-lino: #FDFAF8;       /* sfondo principale */
  --colore-verdemare: #7A9B8E;  /* prezzi, badge pesce */

  /* Neutri di supporto (testo, bordi) */
  --colore-testo: #2A1512;
  --colore-testo-chiaro: #FDFAF8;
  --colore-bordo: #E5D9D0;

  /* -----------------------------------------------------------------------
     Tipografia
     Libre Baskerville caricato via Google Fonts (vedi assets/partials/head-fonts.html).
     Glacial Indifference caricato via @font-face (vedi assets/css/font-face.css).
     ----------------------------------------------------------------------- */
  --font-titoli: 'Libre Baskerville', serif;
  --font-testo: 'Glacial Indifference', sans-serif;

  /* -----------------------------------------------------------------------
     Border radius
     ----------------------------------------------------------------------- */
  --radius-sm: 8px;    /* card piccole, badge */
  --radius-md: 16px;   /* card, immagini, box contenuto */
  --radius-full: 999px; /* bottoni a pillola, tab, badge tondi */

  /* -----------------------------------------------------------------------
     Breakpoint di riferimento
     Nota: le custom properties non sono utilizzabili dentro @media query.
     Questi valori sono documentativi e vanno riportati a mano nei media
     query CSS (es. @media (min-width: 768px)) o letti da JS.
     ----------------------------------------------------------------------- */
  --breakpoint-mobile: 375px; /* riferimento minimo, mobile-first */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
}