:root{
  /* Grade de 4px. 1/2/3 existem para ajustes ópticos em ícones e badges. */
  --sp-0:0px;/* @kind spacing */
  --sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:12px;--sp-6:16px;
  --sp-7:20px;--sp-8:24px;--sp-9:32px;--sp-10:40px;--sp-11:48px;--sp-12:64px;--sp-13:80px;
  --sp-14:110px;

  /* Contornos em tinta — 3px em cartões e botões, 2–2.5px nos elementos pequenos */
  --stroke-sm:2px;--stroke-md:2.5px;--stroke-lg:3px;

  /* Raios — tudo redondo: botões e etiquetas em pílula, cartões bem arredondados */
  --radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:28px;--radius-xl:40px;--radius-2xl:48px;
  --radius-pill:999px;--radius-circle:50%;
  --radius-bubble:24px 24px 6px 24px;                        /* balão de mensagem */
  --radius-blob:58% 42% 55% 45% / 48% 56% 44% 52%;           /* bolha orgânica */
  --radius-plate:220px 220px 44px 44px;                      /* plaquinha de coleira */

  /* Inclinações — dão movimento a etiquetas, bilhetes e cartões flutuantes */
  --tilt-xs:1.5deg;--tilt-sm:2deg;--tilt-md:4deg;--tilt-lg:6deg;

  /* Alturas de controle (mín. 44px em mobile) */
  --control-sm:36px;--control-md:44px;--control-lg:56px;

  /* Layout */
  --sidebar-w:248px;--sidebar-w-collapsed:64px;--topbar-h:64px;
  --content-max:1240px;--page-gutter:var(--sp-8);--card-pad:var(--sp-7);
  --mobile-w:390px;--mobile-tabbar-h:72px;
}