/* ── Oqim Spacing, Radius, Shadow, Motion ───────────────────────
   Sharp corners. 4px base grid. Crisp, low-blur shadows. */

:root {
  /* spacing — 4px grid */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* radius — sharp / minimal */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* borders */
  --bw:      1px; /* @kind other */
  --bw-thick:1.5px; /* @kind other */

  /* shadows — crisp, tight, low spread */
  --shadow-xs: 0 1px 2px rgba(16,24,32,0.05);
  --shadow-sm: 0 1px 2px rgba(16,24,32,0.06), 0 1px 1px rgba(16,24,32,0.04);
  --shadow-md: 0 2px 4px rgba(16,24,32,0.06), 0 4px 12px rgba(16,24,32,0.05);
  --shadow-lg: 0 4px 8px rgba(16,24,32,0.06), 0 12px 28px rgba(16,24,32,0.10);
  --shadow-pop:0 8px 16px rgba(16,24,32,0.08), 0 24px 48px rgba(16,24,32,0.14);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* z-index */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-dropdown: 400; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */

  /* motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */

  /* layout */
  --sidebar-w:    264px;
  --sidebar-w-sm: 72px;
  --topbar-h:     60px;
  --content-max:  1440px; /* @kind other */
}