/* ─────────────────────────────────────────────────────────────
   ARENA — Spacing, radii, elevation
   Values transcribed from the source frames (px, exact — not snapped).
   ───────────────────────────────────────────────────────────── */

:root {
  /* Spacing scale (gaps/padding seen in source: 2,4,6,8,10,12,16,20,24,32,44,60) */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-44: 44px;
  --space-60: 60px;

  /* Radii (exact from source) */
  --radius-menu: 6px;    /* menu item / small control */
  --radius-swatch: 8px;  /* small chip */
  --radius-note: 12px;   /* palette tile */
  --radius-tile: 16px;   /* task / content card */
  --radius-sidebar: 20px; /* sidebar sheet */
  --radius-pill: 100px;  /* pill / badge */
  --radius-panel: 32px;  /* large panel */
  --radius-section: 44px;/* section shell */

  /* Sizing */
  --sidebar-width: 248px;
  --menu-height: 30px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 60px;

  /* Elevation — Arena leans on inset hairline borders, not drop shadows */
  --shadow-card: inset 0 0 0 1px rgb(236,236,236);
  --shadow-sidebar: inset -1px 0 0 0 rgba(84,72,49,0.08);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.02);
  --shadow-pop: 0 8px 24px rgba(8,8,8,0.10);
}