/* Spacing, radius, borders, z-index — UI UX Pro Max
   Base rhythm is 4px. */

:root {
  /* ---- Spacing scale ---- */
  --s-0: 0; /* @kind spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;  /* buttons, inputs */
  --r-lg: 14px;  /* cards */
  --r-xl: 18px;  /* large cards / panels */
  --r-2xl: 24px; /* hero panels */
  --r-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hairline: 1px; /* @kind other */
  --bw-thick: 1.5px; /* @kind other */

  /* ---- Container widths ---- */
  --container-sm: 640px; /* @kind other */
  --container-md: 880px; /* @kind other */
  --container-lg: 1120px; /* @kind other */
  --container-xl: 1280px; /* @kind other */

  /* ---- Z-index ---- */
  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100; /* @kind other */
  --z-toast: 1200; /* @kind other */
}