/* ============================================================
   DIMORE A PALERMO — Design Tokens
   Sistema unico di custom properties. Ogni colore, font e
   misura del sito deriva da qui. Portabile as-is nei template.
   ============================================================ */

:root {
  /* --- Colore -------------------------------------------------
     Concept: "il cortile in ombra a mezzogiorno".
     Dominante verde-teal/maiolica, base in calce fredda,
     un solo accento caldo (zafferano) riservato alle azioni. */
  --calce:    #E7E4D8;  /* base / sfondo — intonaco di calce, raffreddato */
  --ombra:    #15302B;  /* dominante scura, testo, sezioni piene */
  --maiolica: #1C4B5A;  /* superfici profonde secondarie, link */
  --zagara:   #D7A53A;  /* CTA primaria — SOLO azioni di prenotazione */
  --alloro:   #6E8B6A;  /* stati positivi: disponibile, tag */
  --corallo:  #B5563F;  /* SOLO errori / esaurito */

  /* Derivati neutri */
  --gesso:    #F4F2EA;  /* paper / card sul fondo calce */
  --gesso-2:  #EDEADF;  /* superficie alternata */
  --ombra-80: #2A463F;  /* verde meno profondo, bordi su scuro */
  --calce-dim:#C9C5B6;  /* testo tenue su calce */
  --su-scuro: #DCE3DC;  /* testo su superfici scure */
  --su-scuro-dim: #9DB0AB;

  --linea:        rgba(21, 48, 43, 0.14);  /* hairline su chiaro */
  --linea-forte:  rgba(21, 48, 43, 0.26);
  --linea-scuro:  rgba(220, 227, 220, 0.18); /* hairline su scuro */

  /* --- Tipografia --------------------------------------------- */
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;

  /* Scala fluida (mobile -> desktop) */
  --t-hero:    clamp(2.75rem, 1.4rem + 6.2vw, 5.5rem);
  --t-sezione: clamp(2rem, 1.3rem + 3.1vw, 3rem);
  --t-camera:  clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --t-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  --t-body:    1rem;
  --t-small:   0.825rem;
  --t-eyebrow: 0.72rem;

  --lh-tight:  0.97;
  --lh-snug:   1.18;
  --lh-body:   1.65;
  --track-eyebrow: 0.2em;
  --track-display: -0.02em;

  /* --- Spazio (scala 4px) ------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --gutter:   clamp(1.25rem, 5vw, 4rem);
  --maxw:     1240px;
  --maxw-prose: 62ch;

  /* --- Forma -------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* --- Ombra (calde, basse, da luce radente) ------------------ */
  --shadow-1: 0 1px 2px rgba(21,48,43,0.06);
  --shadow-2: 0 8px 24px -12px rgba(21,48,43,0.22);
  --shadow-3: 0 24px 60px -28px rgba(21,48,43,0.38);

  /* --- Motion ------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --z-header: 50;
  --z-nav: 60;
  --z-cta: 40;
}