/* ==========================================================================
   1-variables.css
   Palette colori, tipografia, spacing e variabili globali del brand Zagara
   ========================================================================== */

:root {
  /* --- Palette colori (da brief) ----------------------------------------- */
 /* --- Palette colori (da brief) ----------------------------------------- */
  --color-bianco-calce: #FAF8F3;       /* Sfondo principale */
  --color-blu-notte: #1C2B3A;          /* Testi, header, elementi strutturali */
  --color-verde-salvia: #7A8C6E;       /* Accenti, bordi, dettagli botanici */
  --color-ocra-dorata: #C8943A;        /* CTA, highlights, accento caldo */
  --color-ocra-scura: #A87826;         /* Hover degli accenti ocra */

  /* Sfumature derivate (per placeholder, hover, sfondi alternativi) */
  --color-bianco-calce-soft: #F4F1E9;  /* Variante leggermente più scura per sezioni alterne */
  --color-placeholder: #E8E5DE;        /* Sfondo placeholder foto */
  --color-blu-notte-soft: rgba(28, 43, 58, 0.7);   /* Testi secondari */
  --color-blu-notte-faint: rgba(28, 43, 58, 0.15); /* Bordi sottili */
  --color-overlay: rgba(28, 43, 58, 0.4);          /* Overlay su immagini hero */

  /* --- Tipografia -------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scala tipografica desktop (Minor Third 1.200) */
  --fs-h1: 40px;
  --fs-h2: 34px;
  --fs-h3: 28px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-body: 16px;
  --fs-small: 14px;

  /* Pesi */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line height */
  --lh-display: 1.2;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  /* Letter spacing */
  --ls-display: -0.01em;
  --ls-label: 0.08em;       /* Per label uppercase */
  --ls-label-wide: 0.15em;  /* Per label "tipografiche" molto spaziate */

  /* --- Spacing (scala basata su 8px) ------------------------------------ */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;       /* Per blocchi di testo lungo (descrizioni, guida) */
  --container-padding: 24px;

  /* --- Bordi & Radius --------------------------------------------------- */
  --border-thin: 1px solid var(--color-blu-notte-faint);
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-circle: 50%;

  /* --- Transizioni ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 200ms var(--ease-out);
  --transition-medium: 400ms var(--ease-out);
  --transition-slow: 800ms var(--ease-out);

  /* --- Z-index ---------------------------------------------------------- */
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-floating-cta: 90;

  /* --- Header height (per offset scroll) -------------------------------- */
  --header-height: 72px;
}

/* --- Scala tipografica mobile -------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --container-padding: 20px;
    --header-height: 64px;
  }
}