/* ============================================================
   Kumo — Radius, spacing & elevation tokens
   ============================================================ */

:root,
[data-theme="kumo"] {
  /* Spacing — 4px base grid */
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-2_5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius — controls climb sm → md → lg; pills & circles for badges/avatars */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Control heights (xs/sm/base/lg) shared by Button & Input */
  --control-h-xs: 20px;
  --control-h-sm: 26px;
  --control-h-base: 36px;
  --control-h-lg: 40px;

  /* Elevation — soft, low-contrast. Edge ring + drop shadow. */
  --shadow-xs: 0 1px 2px var(--color-kumo-shadow-drop);
  --shadow-sm: 0 1px 2px var(--color-kumo-shadow-drop), 0 2px 6px var(--color-kumo-shadow-drop);
  --shadow-md:
    0 0 0 0.5px var(--color-kumo-shadow-edge),
    0 4px 12px var(--color-kumo-shadow-drop);
  --shadow-lg:
    0 0 0 0.5px var(--color-kumo-shadow-edge),
    0 12px 32px var(--color-kumo-shadow-drop);

  /* Motion — fast, mostly easeOut; one playful bounce for toasts */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.2, 0, 0, 1.5); /* @kind other */
  --duration-fast: 100ms; /* @kind other */
  --duration-base: 150ms; /* @kind other */
  --duration-slow: 250ms; /* @kind other */
}