style(design-system): normalize exact-match border-radius literals to tokens

Mechanical sweep for border-radius: 4px/8px/12px/13px/999px replaced
with var(--radius-xs/sm/md/lg/full, <same value>) across src/app.
Only exact matches to existing token values were touched (20px, 16px,
10px, 6px, 3px, 2px etc. were left as-is since no token maps to them
without a visible size change on at least one tenant theme — see
docs/UI-DESIGN-REVIEW.md).

src/app/features/website/product/components/delivery-information/delivery-information.component.scss

@@ -4,7 +4,7 @@
   gap: 12px;
   padding: 16px;
   border: 1px solid #d3dad9;
-  border-radius: 13px;
+  border-radius: var(--radius-lg, 13px);
   background: #f8faf9;
 
   h2 {
@@ -17,7 +17,7 @@
 .delivery-chip {
   width: fit-content;
   padding: 6px 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: rgba(73, 118, 113, 0.12);
   color: #3d635f;
   font-weight: 800;

src/app/features/website/product/components/product-gallery/product-gallery.component.scss

@@ -8,7 +8,7 @@
   position: relative;
   aspect-ratio: 1;
   border: 1px solid #d3dad9;
-  border-radius: 13px;
+  border-radius: var(--radius-lg, 13px);
   overflow: hidden;
   background: #fff;
   display: flex;
@@ -40,7 +40,7 @@
   border: 1px solid rgba(30, 60, 56, 0.25);
   background: rgba(255, 255, 255, 0.9);
   color: #1e3c38;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   padding: 0 10px;
   font-weight: 700;
   cursor: pointer;
@@ -61,7 +61,7 @@
 
   a {
     min-height: 38px;
-    border-radius: 999px;
+    border-radius: var(--radius-full, 999px);
     border: 1px solid #497671;
     color: #2e5e59;
     text-decoration: none;
@@ -123,7 +123,7 @@
   z-index: 1;
   background: rgba(30, 60, 56, 0.78);
   color: #fff;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   padding: 2px 8px;
   font-size: var(--font-size-xs, 0.75rem);
   text-transform: uppercase;

src/app/features/website/product/components/product-information/product-information.component.scss

@@ -27,7 +27,7 @@
   align-items: center;
   min-height: 26px;
   padding: 3px 9px;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: #497671;
   color: #fff;
   font-size: var(--font-size-xs, 0.75rem);
@@ -93,7 +93,7 @@
   width: 100%;
   min-height: 48px;
   border: 0;
-  border-radius: 13px;
+  border-radius: var(--radius-lg, 13px);
   background: #497671;
   color: #fff;
   font-size: var(--font-size-lg, 1rem);

src/app/features/website/product/components/variant-selector/variant-selector.component.scss

@@ -49,7 +49,7 @@
   min-height: 34px;
   padding: 0 14px;
   border: 1px solid #d3dad9;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: #fff;
   color: #1e3c38;
   font-weight: 800;

src/app/features/website/product/containers/product-details-container.component.scss

@@ -61,7 +61,7 @@
     min-height: 42px;
     padding: 0 22px;
     border: 0;
-    border-radius: 13px;
+    border-radius: var(--radius-lg, 13px);
     background: #497671;
     color: #fff;
     text-decoration: none;

src/app/features/website/product/engagement/components/question-card/question-card.component.scss

@@ -44,7 +44,7 @@ header {
 
 .seller-pill,
 .accepted-pill {
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   padding: 2px 8px;
   font-size: var(--font-size-xs, 0.75rem);
 }
@@ -72,7 +72,7 @@ footer {
 footer button {
   min-height: 32px;
   border: 1px solid var(--border-color);
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: var(--bg-primary);
   color: var(--text-secondary);
   padding: 0 10px;

src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss

@@ -39,7 +39,7 @@
 .distribution-row progress {
   width: 100%;
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   overflow: hidden;
 }
 
@@ -58,7 +58,7 @@
 
 .line {
   height: 12px;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: linear-gradient(90deg, #edf1f1 25%, #e2ebea 50%, #edf1f1 75%);
   background-size: 200% 100%;
   animation: shimmer 1.2s linear infinite;

src/app/features/website/product/engagement/components/review-card/review-card.component.scss

@@ -19,7 +19,7 @@
 
 .pill {
   border: 1px dashed var(--border-dark);
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   padding: 3px 8px;
   font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
@@ -45,7 +45,7 @@ p {
 .review-actions button {
   min-height: 32px;
   border: 1px solid var(--border-color);
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: var(--bg-primary);
   color: var(--text-secondary);
   padding: 0 10px;

src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss

@@ -26,5 +26,5 @@
 .star-btn:focus-visible {
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs, 4px);
 }