/* ============================================================
   PARK HOTEL BELLEVUE — base.css
   Token di design (:root) · reset · tipografia base · bottoni condivisi
   Sistema "Aria di Valle" — Cantata One + Red Hat Display
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=Red+Hat+Display:wght@300;400;500;600;700&display=swap');

:root{
  /* ---------- COLORE (colori logo: #3E3E40 grafite · #B25A81 prugna) ---------- */
  --color-bg:#FBF8F2;          /* avorio — sfondo pagina */
  --color-surface:#FFFFFF;     /* card */
  --color-stone:#F1EADF;       /* sezioni alternate */
  --color-sand:#E6DBCB;        /* placeholder/figure */
  --color-dark:#2D2A26;        /* espresso — footer / overlay caldi */
  --color-text:#3E3E40;        /* grafite logo */
  --color-text-soft:#6F675F;   /* testo secondario caldo */
  --color-taupe:#8C6F62;       /* terra/taupe — eyebrow, dettagli */
  --color-primary:#B25A81;     /* prugna logo — accento */
  --color-cta:#803F5C;         /* prugna profondo — CTA (contrasto AA) */
  --color-cta-hover:#682F48;
  --color-plum-soft:#E8C7D6;
  --color-line:#E5DCCD;        /* bordi caldi */
  --color-on-dark:#EFE7DA;     /* testo su fondo scuro */
  --color-on-dark-soft:#C4BBAD;

  /* ---------- TIPOGRAFIA (2 famiglie) ---------- */
  --font-display:'Cantata One',Georgia,serif;   /* titoli + corsivo (faux-italic) */
  --font-body:'Red Hat Display',system-ui,sans-serif;

  /* Scala fluida — clamp(min @360, base+vw, max desktop) */
  --fs-hero:clamp(2.1rem, 1.1rem + 4.3vw, 5rem);     /* H1 hero 34 → 80 — scala di più tra mobile e desktop */
  --fs-h1:clamp(2rem, 1.5rem + 2.2vw, 3.6rem);       /* H1 pagine interne 32 → 58 */
  --fs-display:clamp(1.6rem, .8rem + 3.6vw, 4rem);   /* frasi poetiche 26 → 64 — su mobile è un accento, non un hero */
  --fs-h2:clamp(1.75rem, 1.22rem + 2.25vw, 3.25rem); /* H2 28 → 52 */
  --fs-h3:clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  --fs-lead:var(--fs-body); /* i lead usano lo stesso corpo del testo */
  --fs-body:clamp(1.0625rem, .8958rem + .5556vw, 1.3125rem); /* 17px mobile -> 21px desktop (>=1200px) */
  --fs-eyebrow:.78rem;
  --lh-body:1.65;

  /* ---------- SPAZI · FORMA · MOTO ---------- */
  --gutter:clamp(24px, 5vw, 60px);
  --space-section:clamp(72px, 9vw, 150px);
  --container-max:1440px;
  --radius-sm:2px;
  --radius:6px;
  --radius-lg:10px;
  --shadow-sm:0 2px 12px -6px rgba(62,62,64,.16);
  --shadow:0 22px 50px -28px rgba(62,62,64,.34);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:clamp(96px, 10vw, 130px);
  --header-h-solid:clamp(62px, 7vw, 82px);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--color-cta)}

/* ---------- TIPOGRAFIA BASE ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:.002em;color:var(--color-text)}
h2{font-size:var(--fs-h2);line-height:1.14}
h3{font-size:var(--fs-h3);line-height:1.12}
em{font-family:var(--font-display);font-style:italic}
strong,b{font-weight:600}

/* ---------- BOTTONI CONDIVISI ---------- */
.btn{
  font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 30px;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;
  border:1px solid transparent;min-height:48px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn-primary{background:var(--color-cta);color:#fff}
.btn-primary:hover{background:var(--color-cta-hover)}
.btn-ghost{background:transparent;border-color:var(--color-text);color:var(--color-text)}
.btn-ghost:hover{background:var(--color-text);color:var(--color-bg)}
.btn-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-light:hover{background:#fff;color:var(--color-text)}

/* link testuale con sottolineatura animata */
.alink{
  font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.02em;
  color:var(--color-text);text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;padding-bottom:4px;position:relative;
}
.alink::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--color-primary);
  transform:scaleX(.32);transform-origin:left;transition:transform .4s var(--ease);
}
.alink:hover::after{transform:scaleX(1)}
.alink .ar{transition:transform .4s var(--ease)}
.alink:hover .ar{transform:translateX(6px)}

/* eyebrow / sopratitolo (solo testo, niente decorazioni davanti) */
.eyebrow{
  font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--color-taupe);display:inline-block;
}
.lead{font-size:var(--fs-lead);color:var(--color-text-soft);line-height:1.6}

/* contenitore */
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}

/* reveal allo scroll (gestito da js/sections.js) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}