/* Pro Péyi — Radii, borders, shadows, motion
   Shadows are warm (green/brown tinted), soft and low — never harsh black. */
:root {
  /* Radii — generous, friendly */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px; /* @kind other */
  --border-width-strong: 1.5px; /* @kind other */

  /* Shadows (warm tint) */
  --shadow-xs: 0 1px 2px rgba(30,27,21,0.06);
  --shadow-sm: 0 2px 6px rgba(30,27,21,0.07), 0 1px 2px rgba(30,27,21,0.05);
  --shadow-md: 0 8px 20px -6px rgba(30,27,21,0.12), 0 2px 6px rgba(30,27,21,0.06);
  --shadow-lg: 0 20px 40px -12px rgba(30,27,21,0.18), 0 6px 14px -8px rgba(30,27,21,0.10);
  --shadow-xl: 0 32px 64px -16px rgba(12,66,43,0.22);
  --shadow-focus: 0 0 0 3px rgba(31,138,87,0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

@keyframes peyi-spin { to { transform: rotate(360deg); } }