:root {
  /* Corners are generous and soft — the brand is drawn with a fat marker. */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  /* Organic corner for hero/media shapes — echoes the logo's wobbly counters */
  --radius-blob: 58% 42% 52% 48% / 48% 54% 46% 52%;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows are warm and purple-cast — never neutral grey/black. */
  --shadow-xs: 0 1px 2px rgba(36, 23, 51, 0.06);
  --shadow-sm: 0 2px 6px rgba(36, 23, 51, 0.07);
  --shadow-md: 0 8px 20px -6px rgba(36, 23, 51, 0.14);
  --shadow-lg: 0 20px 44px -14px rgba(36, 23, 51, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(253, 248, 231, 0.6);

  /* Signature: the "pop" — a hard offset edge, like a printed sticker.
     Interactive elements sit ON it and press INTO it. */
  --shadow-pop: 0 3px 0 0 var(--purple-800);
  --shadow-pop-coral: 0 3px 0 0 var(--coral-700);
  --shadow-pop-pressed: 0 1px 0 0 var(--purple-800);

  --ring-focus: 0 0 0 3px var(--cream-100), 0 0 0 6px var(--coral-500);
}