/* ============================================================
   Radius & elevation — Claude-style design system
   Color-block first, shadow rare.
   ============================================================ */

:root {
  --radius-xs: 4px;    /* badge accents, tiny dropdowns */
  --radius-sm: 6px;    /* small inline buttons, dropdown items */
  --radius-md: 8px;    /* buttons, inputs, category tabs */
  --radius-lg: 12px;   /* content + product cards */
  --radius-xl: 16px;   /* hero illustration container */
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* Shadows are minimal — depth comes from cream-vs-dark surface contrast */
  --shadow-soft: 0 1px 3px rgba(20, 20, 19, 0.08);
}