/* mOTTOSLOT — spacing, radius, elevation, motion tokens */

:root {
  /* spacing — 4px base scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* radius — mostly sharp/cut, matching the angular wordmark; small controls
     get a slight round so touch targets don't feel hostile */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-none: 0px;

  /* elevation — dark UI: shadows read best as tight, dark, and a colored
     glow rather than a soft drop shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-glow-brand: 0 0 0 1px rgba(36,0,255,0.4), 0 0 24px var(--glow-brand);
  --shadow-glow-gold: 0 0 0 1px rgba(240,180,41,0.4), 0 0 24px var(--glow-gold);

  /* motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
}