css: replace hardcoded values with design tokens

Replace 30 border-radius: 1000px → var(--radius-pill), 6 border-radius:
20px → var(--radius-card), 21 transition: 100ms → var(--transition-fast),
and 32 transition: 200ms → var(--transition-normal) across the codebase.

src/lib/components/recipes/TitleImgParallax.svelte

@@ -87,7 +87,7 @@
   width: min(1000px, 100dvw);
   z-index: -1;
   opacity: 0;
-  transition: 200ms;
+  transition: var(--transition-normal);
   height: max(60dvh,600px);
   object-fit: cover;
   object-position: 50% 20%;