/* SUMA RSE — Effects: radii, shadows, borders, motion
 * Corner language echoes the logo's tile mosaic: small, calm radii — never pill-soft
 * on big surfaces. Shadows are low, soft, and tinted with plum (never neutral gray).
 */
:root {
  /* Radii */
  --radius-xs:  4px;    /* matches the logo tiles */
  --radius-sm:  8px;
  --radius-md:  12px;   /* buttons, inputs */
  --radius-lg:  16px;   /* cards */
  --radius-xl:  24px;   /* feature panels */
  --radius-pill: 999px; /* tags, avatars, chips */

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Plum-tinted shadows */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--plum-gray) 8%, transparent);
  --shadow-sm: 0 2px 6px color-mix(in srgb, var(--plum-gray) 10%, transparent);
  --shadow-md: 0 8px 20px -6px color-mix(in srgb, var(--plum-gray) 16%, transparent);
  --shadow-lg: 0 20px 44px -12px color-mix(in srgb, var(--plum-gray) 22%, transparent);
  --shadow-brand: 0 16px 36px -12px color-mix(in srgb, var(--honey-flower) 40%, transparent);

  /* Motion — gentle, hopeful; no aggressive bounces */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 220ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
}