/* ============================================================
   ESTETICA CRISTINA — Design tokens (v2, ricostruzione da zero
   su spec Figma: Italiana + DM Serif Display + Jost, avorio caldo
   / carbone / oro antico, zero card con ombra — solo hairline).
   ============================================================ */
:root {
  /* ── Superfici ── */
  --bg-ivory:   #F8F5F0; /* fondo caldo di default, non bianco freddo */
  --bg-ivory-2: #F0E9DF; /* variante leggermente più profonda, sezioni alternate (Principi) */
  --bg-dark:    #1B1613; /* "carbone profondo": Filosofia, Tecnologie, Contatti */

  /* ── Accento ── */
  --accent:     #B89674; /* oro antico — riservato a hover e dettagli minimi, mai su superfici grandi */
  --accent-dim: rgba(184, 150, 116, 0.28);

  /* ── Testo ── */
  --text-dark:        #1B1613;
  --text-dark-muted:  rgba(27, 22, 19, 0.62);
  --text-light:       #F8F5F0;
  --text-light-muted: rgba(248, 245, 240, 0.62);

  /* ── Bordi hairline (non ombre) ── */
  --hairline-dark:  rgba(27, 22, 19, 0.14);   /* su sfondi chiari */
  --hairline-light: rgba(248, 245, 240, 0.16); /* su sfondi scuri */

  /* ── Typography ──
     Italiana: solo logo/wordmark + numeri decorativi (01, 02...).
     DM Serif Display: titoli di sezione.
     Jost 300: corpo/UI — leggero, geometrico, contrasto netto coi serif. */
  --font-italiana: 'Italiana', serif;
  --font-serif:    'DM Serif Display', serif;
  --font-body:     'Jost', system-ui, sans-serif;

  /* Type scale */
  --text-xs:      0.72rem;
  --text-sm:      0.9rem;
  --text-base:    1rem;
  --text-lg:      1.15rem;
  --text-hero:    clamp(3rem, 1.6rem + 6vw, 5.4rem);
  --text-section: clamp(2.2rem, 1.6rem + 2.4vw, 3rem);

  /* ── Spaziatura ── */
  --sp-xxs: 0.5rem;
  --sp-xs:  1rem;
  --sp-sm:  1.5rem;
  --sp-md:  2.5rem;
  --sp-lg:  4rem;
  --sp-xl:  6rem;
  --sp-xxl: 9rem;

  /* ── Layout ── */
  --max-w: 1280px;
  --pad-x: 2rem;
  --radius: 6px; /* angoli leggermente tondi, mai netti — su bottoni, media, card */

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   0.25s var(--ease-out);
  --t-base:   0.45s var(--ease-out);
  --t-slow:   0.8s  var(--ease-out);

  /* ── Header ── */
  --header-h: 84px;
}

@media (max-width: 720px) {
  :root {
    --sp-xxl: 5.5rem;
    --sp-xl:  3.5rem;
    --pad-x:  1.4rem;
  }
}

@media (max-width: 480px) {
  :root { --pad-x: 1.2rem; }
}