/* ============================================================
   Mercati — Espaçamento, raios, sombras e movimento
   ============================================================ */

:root{
  /* ---------- Espaçamento (base 4px) ---------- */
  --space-0:0;
  --space-1:0.25rem;   /* 4 */
  --space-2:0.5rem;    /* 8 */
  --space-3:0.75rem;   /* 12 */
  --space-4:1rem;      /* 16 */
  --space-5:1.5rem;    /* 24 */
  --space-6:2rem;      /* 32 */
  --space-7:3rem;      /* 48 */
  --space-8:4rem;      /* 64 */
  --space-9:6rem;      /* 96 */

  /* ---------- Raios de canto ----------
     Cantos arredondados mantêm o tom humano da marca. */
  --radius-xs:5px;
  --radius-sm:8px;
  --radius-md:12px;    /* cartões, inputs */
  --radius-lg:18px;    /* painéis */
  --radius-xl:24px;    /* blocos grandes */
  --radius-pill:999px; /* botões pílula, tags */

  /* ---------- Sombras ----------
     Discretas e quentes — a marca evita drama. */
  --shadow-xs:0 1px 2px rgba(21,18,14,.06);
  --shadow-sm:0 2px 8px rgba(21,18,14,.07);
  --shadow-md:0 8px 22px -10px rgba(21,18,14,.18);
  --shadow-lg:0 18px 50px -18px rgba(14,51,38,.32);
  --shadow-focus:0 0 0 3px var(--ring);

  /* ---------- Bordas ---------- */
  --border-width:1px;
  --border-width-strong:2px;

  /* ---------- Movimento ----------
     Transições curtas e suaves; sem bounce. */
  --ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --container:1120px;  /* largura máxima de conteúdo */
}