/* ============================================================
   KYRO — Spacing, radius, shadow, border, motion tokens
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --kyro-space-1: 4px;
  --kyro-space-2: 8px;
  --kyro-space-3: 12px;
  --kyro-space-4: 16px;
  --kyro-space-5: 20px;
  --kyro-space-6: 24px;
  --kyro-space-8: 32px;
  --kyro-space-10: 40px;
  --kyro-space-12: 48px;

  /* Radius — soft, rounded, friendly-but-premium */
  --kyro-radius-sm: 8px;    /* inputs, small chips    */
  --kyro-radius-md: 12px;   /* buttons, list rows     */
  --kyro-radius-lg: 16px;   /* cards, panels          */
  --kyro-radius-xl: 20px;   /* large containers       */
  --kyro-radius-pill: 999px;

  /* Borders */
  --kyro-border-width: 1px;
  --kyro-border-hairline: 1px solid var(--kyro-border);

  /* Shadows — soft, low, neutral (no color tints) */
  --kyro-shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
  --kyro-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 3px rgba(17, 17, 17, 0.05);
  --kyro-shadow-md: 0 2px 4px rgba(17, 17, 17, 0.04), 0 4px 12px rgba(17, 17, 17, 0.06);
  --kyro-shadow-lg: 0 8px 24px rgba(17, 17, 17, 0.08), 0 2px 6px rgba(17, 17, 17, 0.05);
  --kyro-shadow-pop: 0 12px 32px rgba(17, 17, 17, 0.14);

  /* Focus ring */
  --kyro-ring: 0 0 0 3px rgba(19, 19, 19, 0.12);

  /* Motion */
  --kyro-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --kyro-dur-fast: 120ms; /* @kind other */
  --kyro-dur: 180ms; /* @kind other */
  --kyro-dur-slow: 260ms; /* @kind other */

  /* Layout */
  --kyro-sidebar-w: 264px;
  --kyro-sidebar-w-collapsed: 76px;
  --kyro-header-h: 64px;
}