/* ============================================================
   Ermes — Misure e forma.
   Passi pieni di 12, medie di 6, il 3 come micro.
   ============================================================ */
:root {
  --space-3:  3px;
  --space-6:  6px;
  --space-12: 12px;
  --space-18: 18px;
  --space-24: 24px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;
  --space-72: 72px;
  --space-96: 96px;

  /* ---- Raggi: i comandi sono capsule, i contenitori rettangoli morbidi ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Bordi ---- */
  --border-thin: 1px;

  /* ---- Layout ---- */
  --container:  1180px;
  --prose-max:  62ch;
  --gutter:     24px;
  --control-h:  48px; /* la CTA marketing è più generosa di quella di prodotto */

  /* ---- Ombra: solo per ciò che galleggia davvero (menu, modali, drawer).
          Le superfici in pagina stanno sul terreno: le separa il tono, non l'ombra. ---- */
  --shadow-float: 0 4px 10px -2px rgba(20, 23, 26, 0.05), 0 18px 40px -12px rgba(20, 23, 26, 0.14);

  /* ---- Movimento ---- */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 240ms; /* @kind other */
  --ease:     cubic-bezier(0.2, 0, 0.38, 0.9); /* @kind other */
}