/* ==========================================================================
   Bela — Spacing, radii, shadows, motion
   Bela's UI is tight and utilitarian (an audio IDE). Radii are small (2–4px),
   shadows are soft and low. Motion is quick ease-in-out fades.
   ========================================================================== */
:root {
  /* ---- Spacing scale ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  10px;
  --space-4:  14px;
  --space-5:  20px;
  --space-6:  30px;
  --space-7:  40px;
  --space-8:  50px;

  /* ---- Radii (deliberately small — this is a technical UI) ---- */
  --radius-xs: 2px;   /* dropdowns, inputs */
  --radius-sm: 3px;   /* buttons */
  --radius-md: 4px;   /* number pickers, chips */
  --radius-pill: 18px;/* toggle track */
  --radius-round: 50%;/* radio dots, toggle knob */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 2px;  /* dropdown / emphasised control outline */

  /* ---- Shadows ---- */
  --shadow-hairline: 5px 5px 5px rgba(0, 0, 0, 0.05);        /* hero bar */
  --shadow-thumb:    0 1px 4px rgba(0, 0, 0, 0.2);           /* slider knob rest */
  --shadow-thumb-active: 0 1px 4px rgba(0, 0, 0, 0.5);       /* slider knob active */
  --shadow-dropdown: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);    /* menus, popovers */
  --shadow-toolbar:  5px 5px #eee;                           /* IDE toolbar offset */

  /* ---- Motion ---- */
  --trans-fast: 0.1s; /* @kind other */
  --trans-reg:  0.25s; /* @kind other */
  --trans-slow: 0.4s; /* @kind other */
  --ease: ease-in-out; /* @kind other */

  /* ---- Layout constants (IDE chrome) ---- */
  --hero-height: 60px;
  --toolbar-height: 43px;
  --tab-rail-width: 50px;
  --tab-panel-width: 450px;
}