/* ETLO — Spacing, radius, shadow, layout tokens
   Spacing base unit is 8 (spacing-1). 4px is the half-step.
   Radii read from the Figma button/field/image tokens (4/5/8/12/16, pill=500). */
:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;    /* spacing-1 */
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;   /* screen margin */
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;  /* section gap */
  --space-16: 64px;
  --space-18: 72px;

  /* ---- Screen / layout ---- */
  --screen-margin: 24px;
  --row-1l: 40px;
  --row-2l: 44px;
  --row-3l: 68px;
  --row-4l: 80px;
  --row-5l: 100px;
  --section-gap: 24px;
  --card-gap: 16px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 500px;
  --radius-circle: 50%;

  /* ---- Control heights (from Figma button/field tokens) ---- */
  --control-xs: 24px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /* ---- Elevation / shadow ----
     ETLO uses one soft ambient shadow heavily; deeper levels for sheets/menus. */
  --shadow-1: 4px 4px 20px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 24px rgba(28,45,71,0.10);
  --shadow-3: 0 16px 40px rgba(28,45,71,0.16);
  --shadow-card: 0 4px 16px rgba(134,144,162,0.16);
  --shadow-focus: 0 0 0 4px rgba(0,133,255,0.18);
}