/* Kalimi — Spacing, radius, shadows. Values from Kalimi.fig Variables. */
:root {
  /* Spacing scale (px) */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;

  /* Radius */
  --radius-xs: 4px;    /* checkbox */
  --radius-sm: 8px;    /* inputs, small cards */
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;   /* large cards / sheets */
  --radius-full: 999px; /* pills, buttons, radios, avatars */

  /* Shadows */
  --shadow-xs: 0px 1px 2px 0px rgba(0,0,0,0.05);
  --shadow-sm: 0px 2px 8px 0px rgba(0,0,0,0.06);
  --shadow-md: 0px 8px 24px 0px rgba(0,0,0,0.08);
  --shadow-lg: 0px 16px 40px 0px rgba(0,0,0,0.10);
  --shadow-brand: 0px 6px 12px 0px rgba(255,229,0,0.30); /* yellow glow on primary button hover */

  /* Focus ring — the signature 5px yellow ring on inputs */
  --ring-brand: 0 0 0 5px var(--brand-yellow);
  --ring-brand-2: 0 0 0 4px var(--brand-yellow-2);
}