/* United Distributors — Radii, borders, shadows, motion */
:root {
  /* ---- Corner radii ---- */
  --radius-sm:   6px;   /* inputs, small chips */
  --radius-md:   10px;  /* image frames, panels */
  --radius-lg:   16px;  /* cards, news tiles, spotlight cards */
  --radius-xl:   24px;  /* large feature panels */
  --radius-pill: 999px; /* all buttons & filter chips are fully rounded */
  --radius-circle: 50%; /* logo, avatars */

  /* ---- Border widths ---- */
  --border-hairline: 1px;
  --border-thick:    2px;

  /* ---- Shadows (soft, restrained — the brand is mostly flat) ---- */
  --shadow-xs: 0 1px 2px rgba(18,18,18,0.06);
  --shadow-sm: 0 2px 8px rgba(18,18,18,0.08);
  --shadow-md: 0 8px 24px rgba(18,18,18,0.12);
  --shadow-lg: 0 18px 48px rgba(18,18,18,0.18);
  --shadow-image: 0 20px 40px rgba(18,18,18,0.22); /* photo frames */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
  --transition-base: all var(--duration-base) var(--ease-standard);
}