/* =========================================================
   Design Tokens — Spacing, Radius, Shadows, Motion, Layers
   Escala 4pt-based (base 0.25rem).
   ========================================================= */

:root {
  /* --- Spacing scale --- */
  --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:   2.5rem;    /* 40 */
  --space-8:   3rem;      /* 48 */
  --space-9:   4rem;      /* 64 */
  --space-10:  5rem;      /* 80 */
  --space-11:  6rem;      /* 96 */
  --space-12:  8rem;      /* 128 */

  /* --- Section padding fluído --- */
  --section-py:  clamp(3rem, 6vw, 6rem);
  --section-px:  clamp(1.25rem, 4vw, 4rem);

  /* --- Containers --- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* --- Border radius --- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(19, 20, 20, 0.04);
  --shadow-sm: 0 1px 3px rgba(19, 20, 20, 0.06), 0 1px 2px rgba(19, 20, 20, 0.04);
  --shadow-md: 0 4px 10px rgba(19, 20, 20, 0.08), 0 2px 4px rgba(19, 20, 20, 0.05);
  --shadow-lg: 0 12px 24px rgba(19, 20, 20, 0.10), 0 4px 8px rgba(19, 20, 20, 0.06);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  /* --- z-index --- */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;
}