/* ============================================================
   Teradix — Spacing, Radius, Elevation, Layout, Motion
   The legacy named steps (x2..x56) are normalized to a clean 4px grid.
   ============================================================ */

:root {
  /* ---------- Spacing (4px base grid) ---------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;

  /* ---------- Radius ---------- */
  /* Legacy cards were sharp (radius 0). Normalized to a calm, small
     radius for surfaces; pills stay fully round (legacy .ulabel = 2rem). */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* default card / input / button */
  --radius-lg: 12px;    /* large panels, modals */
  --radius-xl: 16px;
  --radius-pill: 999px; /* badges, chips, toggles */

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 22, 69, 0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0, 22, 69, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(0, 22, 69, 0.10);
  --shadow-lg: 0 12px 28px -6px rgba(0, 22, 69, 0.16);
  --shadow-xl: 0 24px 48px -12px rgba(0, 22, 69, 0.22);
  --shadow-focus: var(--focus-ring);

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-width-thick: 2px;
  --hairline: 1px solid var(--border-subtle);

  /* ---------- Layout constants ---------- */
  --header-height: 64px;
  --page-max: 1280px;
  --page-gutter: 32px;
  --rail-width: 312px;
  --content-pad: 24px;

  /* ---------- Breakpoints (reference) ---------- */
  --bp-sm: 568px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl: 1600px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --duration-slow: 280ms; /* @kind other */

  /* ---------- Z-index ---------- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-header: 200; /* @kind other */
  --z-dropdown: 300; /* @kind other */
  --z-overlay: 400; /* @kind other */
  --z-modal: 500; /* @kind other */
  --z-toast: 600; /* @kind other */
}