/* ─────────────────────────────────────────────────────────────────────────
   On Energy — Spacing, radius, shadow & layout tokens
   Corners are soft but restrained: pills for interactive controls, 12–16px
   for containers. Shadows are whisper-light (functionalist, not decorative).
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Spacing scale (0.25rem = 3.75px at 15px root) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius — base 0.75rem, controls use full pill */
  --radius: 0.75rem;              /* 12px — the container default */
  --radius-sm: calc(var(--radius) - 4px);  /* 8px  */
  --radius-md: calc(var(--radius) - 2px);  /* 10px */
  --radius-lg: var(--radius);              /* 12px */
  --radius-xl: calc(var(--radius) + 4px);  /* 16px — cards, grids, popups */
  --radius-2xl: calc(var(--radius) + 8px); /* 20px */
  --radius-pill: 9999px;          /* buttons, inputs, badges, switches */

  /* Shadows — extremely subtle; elevation comes from hairline borders */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);   /* popups / filter panels */
  --shadow-lg: 0 10px 24px rgb(0 0 0 / 0.10);  /* dialogs, sheets */

  /* Layout */
  --navbar-height: 64px;
  --sidebar-width: 16rem;
  --main-height: calc(100vh - var(--navbar-height));
}