/* Operations — Spacing, radii, shadows, layout
 * Spacing on a 4px base. The UI is calm and airy: hairline dividers over
 * boxes, soft radii, near-flat surfaces (shadows reserved for FAB/overlays).
 */
:root {
  --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;

  /* Corner radii — gentle, never pill unless intentional */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Borders */
  --border-w: 1px;

  /* Shadows — used sparingly (floating controls, popovers) */
  --shadow-sm: 0 1px 2px rgba(26, 23, 18, 0.06);
  --shadow-md: 0 6px 20px rgba(26, 23, 18, 0.10);
  --shadow-fab: 0 4px 14px rgba(26, 23, 18, 0.22);

  /* Layout */
  --sidebar-w: 232px;
  --content-max: 720px;
  --rail-w: 340px;

  /* Motion — quiet, fast, no bounce */
  --ease: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 180ms;  /* @kind other */
}