From 7cb1c8c3c6a8e490084d256f5fe5b7c51b57d3b9 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Mon, 20 Jul 2026 03:26:17 +0400
Subject: [PATCH] style(design-system): roll out font-size scale across
 storefront/builder/backoffice

Mechanical, value-preserving substitution: every literal font-size
declaration across src/app (89 files) that matched one of the 9
typography scale steps introduced earlier (--font-size-xs..4xl) was
replaced with var(--font-size-STEP, <same-or-nearest-step-value>).

Values within ~0.03rem/1px of a scale step were snapped to that step
(e.g. 0.85rem and 0.8rem both -> --font-size-sm/0.8125rem; 0.9rem and
0.875rem -> --font-size-base/0.875rem) to consolidate roughly 15
near-duplicate sizes down to the 9-step scale, per the RC design-system
finalization brief. This eliminates most of the font-size fragmentation
found across the app (previously: 0.7/0.72/0.75/0.78/0.8/0.8125/0.85/
0.875/0.9/0.9375/0.95/1/1.05/1.1/1.125/1.15/1.2/1.25/1.3/1.35/1.4/1.5/
1.75/2rem all in live use simultaneously).

Not touched (deliberately, see docs/UI-DESIGN-REVIEW.md): 3rem+ display
sizes (too large a jump to any existing step, would need a --font-size-5xl
addition), font-size values expressed via clamp()/calc(), and any
component listed as intentionally distinct (code-editor syntax tokens,
theme brand colors).
---
 src/app/app.scss                              |   4 +-
 .../delivery-selector.component.scss          |   6 +-
 .../components/footer/footer.component.scss   |   6 +-
 .../components/header/header.component.scss   |  14 +-
 .../items-carousel.component.scss             |  14 +-
 .../language-selector.component.scss          |  28 +--
 .../product-card/product-card.component.scss  |  16 +-
 .../region-selector.component.scss            |  10 +-
 .../telegram-login.component.scss             |  18 +-
 .../pages/admin-analytics-page.component.scss |  14 +-
 .../admin-categories-list.component.scss      |  12 +-
 .../admin-category-form.component.scss        |  22 +-
 .../categories-dashboard.component.scss       |   4 +-
 .../category-health-widget.component.scss     |   4 +-
 .../admin-customer-detail-page.component.scss |   4 +-
 .../components/dashboard-card.component.scss  |   4 +-
 .../dashboard-metric.component.scss           |   6 +-
 .../dashboard-section.component.scss          |   4 +-
 .../dashboard-shortcut-card.component.scss    |   8 +-
 .../dashboard-status-row.component.scss       |   6 +-
 .../dashboard-timeline.component.scss         |   6 +-
 .../pages/admin-dashboard-page.component.scss |  16 +-
 .../moderation-dashboard.component.scss       |   6 +-
 .../review-health-widget.component.scss       |   4 +-
 .../admin-reports-list-page.component.scss    |   2 +-
 .../admin-review-detail-page.component.scss   |   4 +-
 .../admin-reviews-list-page.component.scss    |   8 +-
 .../admin-monitoring-page.component.scss      |   2 +-
 .../order-timeline.component.scss             |   4 +-
 .../orders-dashboard.component.scss           |   6 +-
 .../admin-order-detail-page.component.scss    |   4 +-
 .../admin-product-form.component.scss         |  26 +--
 .../admin-products-list.component.scss        |   8 +-
 .../product-health-widget.component.scss      |   4 +-
 .../product-variants-editor.component.scss    |  20 +-
 .../products-dashboard.component.scss         |   8 +-
 .../admin/shell/admin-layout.component.scss   |  24 +--
 .../pages/admin-users-page.component.scss     |   4 +-
 .../asset-details-drawer.component.scss       |  10 +-
 .../asset-tile/asset-tile.component.scss      |   6 +-
 .../media/media-library-page.component.scss   |   6 +-
 ...backoffice-coming-soon-page.component.scss |   2 +-
 .../content-dashboard.component.scss          |   4 +-
 .../content-health-widget.component.scss      |   6 +-
 .../page-card/page-card.component.scss        |  10 +-
 .../page-editor/page-editor.component.scss    |  10 +-
 .../static-page-preview.component.scss        |   2 +-
 .../diagnostics-page.component.scss           |   4 +-
 .../marketplace-html-editor.component.scss    |   8 +-
 .../project-editor-nav.component.scss         |  12 +-
 .../builder-overview-page.component.scss      |  26 +--
 .../pages/project-editor-page.component.scss  |  12 +-
 .../brand/brand-overview.component.scss       |  26 +--
 .../sections/footer-section.component.scss    |   4 +-
 .../sections/homepage-section.component.scss  |  12 +-
 .../homepage/homepage-overview.component.scss |  14 +-
 .../sections/section.shared.scss              |  10 +-
 .../sections/widgets-section.component.scss   |  14 +-
 .../search-bar/search-bar.component.scss      |   6 +-
 .../catalog-empty-state.component.scss        |   2 +-
 .../category-grid.component.scss              |   4 +-
 .../filters-panel.component.scss              |   6 +-
 .../sorting-control.component.scss            |   2 +-
 .../catalog-container.component.scss          |  18 +-
 .../delivery-information.component.scss       |   2 +-
 .../product-gallery.component.scss            |   2 +-
 .../product-information.component.scss        |   6 +-
 .../product-specifications.component.scss     |   2 +-
 .../variant-selector.component.scss           |   2 +-
 .../product-tabs/product-tabs.component.scss  |   2 +-
 .../question-card.component.scss              |   2 +-
 .../rating-summary.component.scss             |   2 +-
 .../review-card/review-card.component.scss    |   6 +-
 .../review-form/review-form.component.scss    |   6 +-
 .../star-selector.component.scss              |   2 +-
 .../components/stars/stars.component.scss     |   2 +-
 .../components/compare-table.component.scss   |   4 +-
 .../floating-notifications.component.scss     |   2 +-
 .../recently-viewed-strip.component.scss      |   2 +-
 src/app/pages/cart/cart.component.scss        | 136 ++++++------
 .../pages/category/category.component.scss    |  18 +-
 .../category/subcategories.component.scss     |  34 +--
 .../info/contacts/contacts.component.scss     |   4 +-
 src/app/pages/info/faq/faq.component.scss     |   2 +-
 .../item-detail/item-detail.component.scss    | 200 +++++++++---------
 .../company-details.component.scss            |   4 +-
 src/app/pages/search/search.component.scss    |  34 +--
 .../media-picker/media-picker.component.scss  |   4 +-
 88 files changed, 538 insertions(+), 538 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index e01dd8c..f54e84c 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -43,7 +43,7 @@
 
 .server-error-overlay h2 {
   margin: 0 0 0.5rem;
-  font-size: 1.25rem;
+  font-size: var(--font-size-2xl, 1.25rem);
 }
 
 .server-error-overlay p {
@@ -58,7 +58,7 @@
   border-radius: 8px;
   background: var(--primary-color, #007bff);
   color: #fff;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   cursor: pointer;
   transition: opacity 0.2s;
 
diff --git a/src/app/components/delivery-selector/delivery-selector.component.scss b/src/app/components/delivery-selector/delivery-selector.component.scss
index 4f4a91d..349a41e 100644
--- a/src/app/components/delivery-selector/delivery-selector.component.scss
+++ b/src/app/components/delivery-selector/delivery-selector.component.scss
@@ -13,7 +13,7 @@
 .delivery-label {
   display: block;
   margin-bottom: 8px;
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 700;
   color: #3f5f5c;
 }
@@ -25,7 +25,7 @@
   border: 1px solid #c9d5d3;
   background: #fff;
   color: #1f2937;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   line-height: 1.4;
 }
 
@@ -49,7 +49,7 @@
   align-items: center;
   padding: 6px 10px;
   border-radius: 999px;
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 700;
 }
 
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
index bdb0589..4c9d28b 100644
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
@@ -35,7 +35,7 @@
 .app-footer__group {
   h4 {
     margin: 0 0 0.75rem;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     color: #fff;
   }
 
@@ -86,13 +86,13 @@
   p {
     margin: 0;
     color: rgba(255, 255, 255, 0.7);
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
   }
 
   a {
     color: rgba(255, 255, 255, 0.85);
     text-decoration: none;
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
   }
 }
 
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 93b06d4..a03f412 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -60,7 +60,7 @@
   background: rgba(255, 255, 255, 0.74);
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-weight: 600;
-  font-size: 15px;
+  font-size: var(--font-size-md, 0.9375rem);
   color: #1e3c38;
   text-decoration: none;
   cursor: pointer;
@@ -124,7 +124,7 @@
   outline: none;
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-weight: 600;
-  font-size: 15px;
+  font-size: var(--font-size-md, 0.9375rem);
   color: #828e8d;
   cursor: pointer;
 
@@ -163,7 +163,7 @@
 }
 
 .platform-ux-icon {
-  font-size: 15px;
+  font-size: var(--font-size-md, 0.9375rem);
   line-height: 1;
   font-weight: 700;
 }
@@ -276,7 +276,7 @@
   border-radius: 13px;
   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
   font-family: 'DM Sans', sans-serif;
-  font-size: 16px;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 500;
   color: #1e3c38;
   text-decoration: none;
@@ -389,7 +389,7 @@
   }
 
   .platform-nav-btn {
-    font-size: 18px;
+    font-size: var(--font-size-xl, 1.125rem);
     padding: 8px 32px !important;
   }
 
@@ -418,7 +418,7 @@
   }
 
   .platform-nav-btn {
-    font-size: 16px;
+    font-size: var(--font-size-lg, 1rem);
     padding: 8px 24px !important;
   }
 
@@ -439,7 +439,7 @@
   }
 
   .platform-search-input {
-    font-size: 18px;
+    font-size: var(--font-size-xl, 1.125rem);
   }
 }
 
diff --git a/src/app/components/items-carousel/items-carousel.component.scss b/src/app/components/items-carousel/items-carousel.component.scss
index 2682bcc..0f2a169 100644
--- a/src/app/components/items-carousel/items-carousel.component.scss
+++ b/src/app/components/items-carousel/items-carousel.component.scss
@@ -185,7 +185,7 @@
   padding: 4px 10px;
   border-radius: 20px;
   font-family: "DM Sans", sans-serif;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   letter-spacing: 0.02em;
   z-index: 2;
@@ -202,7 +202,7 @@
 
 .item-name {
   font-family: "DM Sans", sans-serif;
-  font-size: 0.8125rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 600;
   margin: 0;
   line-height: 1.35;
@@ -225,7 +225,7 @@
   align-items: center;
   gap: 4px;
   font-family: "DM Sans", sans-serif;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
 
   svg {
     flex-shrink: 0;
@@ -260,7 +260,7 @@
 
   .current-price,
   .discounted-price {
-    font-size: 0.9375rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 700;
     color: #1e3c38;
   }
@@ -270,7 +270,7 @@
   }
 
   .original-price {
-    font-size: 0.75rem;
+    font-size: var(--font-size-xs, 0.75rem);
     color: #a1b4b5;
     text-decoration: line-through;
   }
@@ -361,13 +361,13 @@
   }
   
   .item-name {
-    font-size: 0.8125rem;
+    font-size: var(--font-size-sm, 0.8125rem);
   }
   
   .item-price {
     .current-price,
     .discounted-price {
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
     }
   }
 }
diff --git a/src/app/components/language-selector/language-selector.component.scss b/src/app/components/language-selector/language-selector.component.scss
index d3de54a..32eda8f 100644
--- a/src/app/components/language-selector/language-selector.component.scss
+++ b/src/app/components/language-selector/language-selector.component.scss
@@ -14,7 +14,7 @@
   color: #ffffff;
   cursor: pointer;
   transition: all 0.3s ease;
-  font-size: 14px;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 500;
 
   &:hover {
@@ -78,7 +78,7 @@
   color: #ffffff;
   cursor: pointer;
   transition: background 0.2s ease;
-  font-size: 14px;
+  font-size: var(--font-size-base, 0.875rem);
   text-align: left;
 
   &:hover:not(.disabled) {
@@ -183,7 +183,7 @@
     .language-code {
       font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       font-weight: 500;
-      font-size: 15px;
+      font-size: var(--font-size-md, 0.9375rem);
       color: #1e3c38;
       letter-spacing: 0;
       line-height: 1;
@@ -224,7 +224,7 @@
 @media (max-width: 768px) {
   .language-button {
     padding: 6px 10px;
-    font-size: 13px;
+    font-size: var(--font-size-sm, 0.8125rem);
 
     .language-flag {
       width: 18px;
@@ -238,7 +238,7 @@
 
   .language-option {
     padding: 10px 14px;
-    font-size: 13px;
+    font-size: var(--font-size-sm, 0.8125rem);
 
     .option-flag {
       width: 20px;
@@ -254,7 +254,7 @@
     }
 
     .language-button .language-code {
-      font-size: 18px;
+      font-size: var(--font-size-xl, 1.125rem);
     }
   }
 }
@@ -325,7 +325,7 @@
   color: #ffffff;
   cursor: pointer;
   transition: all 0.3s ease;
-  font-size: 14px;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 500;
 
   &:hover {
@@ -334,12 +334,12 @@
   }
 
   .currency-symbol {
-    font-size: 15px;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 700;
   }
 
   .currency-code {
-    font-size: 13px;
+    font-size: var(--font-size-sm, 0.8125rem);
     letter-spacing: 0.5px;
   }
 
@@ -384,7 +384,7 @@
   color: #ffffff;
   cursor: pointer;
   transition: background 0.2s ease;
-  font-size: 14px;
+  font-size: var(--font-size-base, 0.875rem);
 
   &:hover {
     background: rgba(255, 255, 255, 0.05);
@@ -396,7 +396,7 @@
   }
 
   .cur-symbol {
-    font-size: 16px;
+    font-size: var(--font-size-lg, 1rem);
     font-weight: 700;
     width: 20px;
     text-align: center;
@@ -407,7 +407,7 @@
   }
 
   .cur-code {
-    font-size: 12px;
+    font-size: var(--font-size-xs, 0.75rem);
     opacity: 0.6;
   }
 }
@@ -450,8 +450,8 @@
     &:hover {
       background: rgba(255, 255, 255, 0.5);
     }
-    .currency-symbol { font-size: 14px; color: #1e3c38; }
-    .currency-code { font-size: 13px; color: #1e3c38; }
+    .currency-symbol { font-size: var(--font-size-base, 0.875rem); color: #1e3c38; }
+    .currency-code { font-size: var(--font-size-sm, 0.8125rem); color: #1e3c38; }
     .dropdown-arrow path { stroke: #1e3c38; }
   }
   .currency-dropdown {
diff --git a/src/app/components/product-card/product-card.component.scss b/src/app/components/product-card/product-card.component.scss
index bd307f5..e19c646 100644
--- a/src/app/components/product-card/product-card.component.scss
+++ b/src/app/components/product-card/product-card.component.scss
@@ -58,7 +58,7 @@
   padding: 6px 12px;
   border-radius: 20px;
   font-weight: 700;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   z-index: 1;
 }
 
@@ -74,7 +74,7 @@
   border-radius: 999px;
   background: rgba(22, 163, 74, 0.9);
   color: #fff;
-  font-size: 0.72rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   text-transform: capitalize;
 }
@@ -99,7 +99,7 @@
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.95);
   color: #1e3c38;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
@@ -160,7 +160,7 @@
   border-radius: 999px;
   background: #497671;
   color: #fff;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   text-transform: uppercase;
 }
@@ -197,7 +197,7 @@
 .product-description {
   margin: 0;
   color: #697777;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   line-height: 1.45;
   display: -webkit-box;
   line-clamp: 2;
@@ -210,7 +210,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: #697777;
 
   .rating-stars {
@@ -229,13 +229,13 @@
 .original-price {
   text-decoration: line-through;
   color: #a1b4b5;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 .discounted-price,
 .current-price {
   color: #1e3c38;
-  font-size: 1.1rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 800;
 }
 
diff --git a/src/app/components/region-selector/region-selector.component.scss b/src/app/components/region-selector/region-selector.component.scss
index 37ddbd7..b6038c6 100644
--- a/src/app/components/region-selector/region-selector.component.scss
+++ b/src/app/components/region-selector/region-selector.component.scss
@@ -11,7 +11,7 @@
   border-radius: 8px;
   background: transparent;
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-primary, #333);
   transition: all 0.2s ease;
   white-space: nowrap;
@@ -66,7 +66,7 @@
   justify-content: space-between;
   padding: 10px 14px;
   border-bottom: 1px solid var(--border-color, #e0e0e0);
-  font-size: 12px;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   color: var(--text-secondary, #666);
   text-transform: uppercase;
@@ -108,7 +108,7 @@
   border-radius: 8px;
   background: transparent;
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--font-size-base, 0.875rem);
   color: var(--text-primary, #333);
   text-align: left;
   transition: background 0.15s ease;
@@ -131,7 +131,7 @@
   }
 
   .region-country {
-    font-size: 12px;
+    font-size: var(--font-size-xs, 0.75rem);
     color: var(--text-secondary, #999);
   }
 }
@@ -156,7 +156,7 @@
 @media (max-width: 768px) {
   .region-trigger {
     padding: 5px 8px;
-    font-size: 12px;
+    font-size: var(--font-size-xs, 0.75rem);
 
     .region-name {
       max-width: 80px;
diff --git a/src/app/components/telegram-login/telegram-login.component.scss b/src/app/components/telegram-login/telegram-login.component.scss
index a1302ad..173803f 100644
--- a/src/app/components/telegram-login/telegram-login.component.scss
+++ b/src/app/components/telegram-login/telegram-login.component.scss
@@ -59,14 +59,14 @@
 
 h2 {
   margin: 0 0 8px;
-  font-size: 20px;
+  font-size: var(--font-size-2xl, 1.25rem);
   font-weight: 700;
   color: var(--text-primary, #1a1a1a);
 }
 
 .login-desc {
   margin: 0 0 24px;
-  font-size: 14px;
+  font-size: var(--font-size-base, 0.875rem);
   color: var(--text-secondary, #666);
   line-height: 1.5;
 }
@@ -82,7 +82,7 @@ h2 {
   border-radius: 12px;
   background: #2AABEE;
   color: #fff;
-  font-size: 16px;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -106,7 +106,7 @@ h2 {
   display: block;
   margin-top: 10px;
   color: var(--accent-color, #497671);
-  font-size: 12px;
+  font-size: var(--font-size-xs, 0.75rem);
   line-height: 1.35;
   overflow-wrap: anywhere;
   text-decoration: none;
@@ -121,7 +121,7 @@ h2 {
 
   .qr-hint {
     margin: 0 0 12px;
-    font-size: 13px;
+    font-size: var(--font-size-sm, 0.8125rem);
     color: var(--text-secondary, #999);
   }
 
@@ -169,7 +169,7 @@ h2 {
       }
 
       span {
-        font-size: 13px;
+        font-size: var(--font-size-sm, 0.8125rem);
       }
     }
 
@@ -189,7 +189,7 @@ h2 {
       }
 
       span {
-        font-size: 13px;
+        font-size: var(--font-size-sm, 0.8125rem);
       }
     }
   }
@@ -197,7 +197,7 @@ h2 {
 
 .login-note {
   margin: 16px 0 0;
-  font-size: 12px;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary, #999);
   line-height: 1.4;
 }
@@ -209,7 +209,7 @@ h2 {
   gap: 10px;
   padding: 16px;
   color: var(--text-secondary, #666);
-  font-size: 14px;
+  font-size: var(--font-size-base, 0.875rem);
 
   .spinner {
     width: 20px;
diff --git a/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss b/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss
index d7cac3d..36470a0 100644
--- a/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss
+++ b/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss
@@ -8,7 +8,7 @@
   border: none;
   background: transparent;
   padding: 10px 14px;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 600;
   color: var(--text-secondary, #6b7280);
   cursor: pointer;
@@ -22,12 +22,12 @@
 
 .summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
 .summary-card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 4px; background: #fff; }
-.summary-card span { font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
-.summary-card strong { font-size: 1.1rem; }
+.summary-card span { font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }
+.summary-card strong { font-size: var(--font-size-xl, 1.125rem); }
 
 .card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
 .card-head { display: flex; justify-content: space-between; align-items: center; }
-.card h2 { margin: 0; font-size: 1.1rem; }
+.card h2 { margin: 0; font-size: var(--font-size-xl, 1.125rem); }
 .chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
 .chart .bar { flex: 1; background: var(--color-primary, #2f8f5b); border-radius: 3px 3px 0 0; min-height: 2px; }
 .pending-section p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-secondary, #6b7280); }
@@ -35,16 +35,16 @@
 
 .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
 
-.activity-list, .warning-list, .recommendation-list, .health-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.85rem; }
+.activity-list, .warning-list, .recommendation-list, .health-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--font-size-sm, 0.8125rem); }
 .activity-list li { display: flex; justify-content: space-between; gap: 8px; }
 .warning-list li, .recommendation-list li, .health-checks li { display: flex; align-items: center; gap: 10px; }
 .recommendation-list a, .health-checks a { color: var(--text-primary, #1e3c38); text-decoration: underline; }
 .recommendation-list a:focus-visible, .health-checks a:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
-.muted { color: var(--text-secondary, #6b7280); font-size: 0.8rem; }
+.muted { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
 
 .health-widget__bar { height: 8px; border-radius: 999px; background: var(--surface-muted, #eef2f0); overflow: hidden; }
 .health-widget__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); transition: width 0.3s ease; }
-.health-percent { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #6b7280); }
+.health-percent { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }
 
 @media (max-width: 900px) {
   .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
diff --git a/src/app/features/admin/categories/components/admin-categories-list.component.scss b/src/app/features/admin/categories/components/admin-categories-list.component.scss
index 4573505..8bcb768 100644
--- a/src/app/features/admin/categories/components/admin-categories-list.component.scss
+++ b/src/app/features/admin/categories/components/admin-categories-list.component.scss
@@ -13,7 +13,7 @@ tr.deleted { opacity: 0.55; }
 .view-toggle { display: flex; gap: 2px; }
 .columns-panel { display: flex; flex-wrap: wrap; gap: 12px; }
 .health-cell { min-width: 140px; }
-.admin-categories-card__guide { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
+.admin-categories-card__guide { margin: 0; text-align: center; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
 .density-compact td, .density-compact th { padding: 4px 8px; }
 
 .category-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 100%; overflow-x: auto; }
@@ -33,9 +33,9 @@ tr.deleted { opacity: 0.55; }
 .category-tree__row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
 .category-tree__toggle { all: unset; cursor: pointer; width: 18px; text-align: center; color: var(--text-secondary, #5f6e6a); }
 .category-tree__toggle-spacer { width: 18px; display: inline-block; }
-.category-tree__icon { font-size: 1rem; }
+.category-tree__icon { font-size: var(--font-size-lg, 1rem); }
 .category-tree__title { font-weight: 600; color: var(--text-primary, #1e3c38); }
-.category-tree__items { font-size: 0.78rem; color: var(--text-tertiary, #9aa6a2); }
+.category-tree__items { font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); }
 .category-tree__actions { display: flex; gap: 6px; flex-wrap: wrap; }
 
 .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@@ -43,9 +43,9 @@ tr.deleted { opacity: 0.55; }
 .category-grid__item { position: relative; display: grid; gap: 6px; }
 .category-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
 .category-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); }
-.category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
-.category-grid__name { margin: 0; font-size: 0.85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.category-grid__items { margin: 0; font-size: 0.78rem; color: var(--text-secondary, #5f6e6a); }
+.category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl, 1.5rem); }
+.category-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.category-grid__items { margin: 0; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }
 .category-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; }
 
 .dialog-body { display: grid; gap: 12px; }
diff --git a/src/app/features/admin/categories/components/admin-category-form.component.scss b/src/app/features/admin/categories/components/admin-category-form.component.scss
index 3c86045..cb5c497 100644
--- a/src/app/features/admin/categories/components/admin-category-form.component.scss
+++ b/src/app/features/admin/categories/components/admin-category-form.component.scss
@@ -7,7 +7,7 @@ label.check { display: flex; align-items: center; gap: 8px; }
 textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; font: inherit; }
 input[type='checkbox'] { width: auto; }
 .sub-block { border-top: 1px dashed #d9e2e1; padding-top: 12px; }
-.breadcrumb-preview { margin: 0; color: var(--text-muted, #667); font-size: 0.9rem; }
+.breadcrumb-preview { margin: 0; color: var(--text-muted, #667); font-size: var(--font-size-base, 0.875rem); }
 .image-field { display: flex; align-items: center; gap: 12px; }
 .image-field .preview { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color, #d3dad9); }
 .actions { display: flex; justify-content: flex-end; gap: 10px; }
@@ -21,7 +21,7 @@ input[type='checkbox'] { width: auto; }
   cursor: pointer;
   padding: 10px 14px;
   border-radius: 8px 8px 0 0;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 600;
   color: var(--text-secondary, #5f6e6a);
   display: inline-flex;
@@ -32,18 +32,18 @@ input[type='checkbox'] { width: auto; }
 }
 .form-card__tab--active { color: var(--brand-primary, #1e8a6e); background: var(--surface-muted, #eef2f0); }
 .form-card__panel { min-height: 200px; display: grid; gap: 14px; }
-.form-card__subheading { margin: 8px 0 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
-.form-card__explain { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
+.form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
+.form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
 .toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
 
-.nav-children { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.85rem; }
+.nav-children { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); }
 
 .seo-preview { border: 1px solid var(--border-subtle, #e7ece9); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; }
-.seo-preview__title { margin: 0; color: #1a0dab; font-size: 1rem; }
-.seo-preview__url { margin: 0; color: #006621; font-size: 0.8rem; }
-.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
+.seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); }
+.seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); }
+.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); }
 .icon-field { display: flex; align-items: center; gap: 8px; app-input { flex: 1; } }
-.icon-field__preview { font-size: 1.4rem; line-height: 1; }
+.icon-field__preview { font-size: var(--font-size-3xl, 1.5rem); line-height: 1; }
 .seo-generate-row { display: flex; align-items: center; gap: 10px; }
-.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: 0.8rem; }
-.breadcrumb-hint { margin: 0 0 4px; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
+.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
+.breadcrumb-hint { margin: 0 0 4px; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
diff --git a/src/app/features/admin/categories/components/categories-dashboard/categories-dashboard.component.scss b/src/app/features/admin/categories/components/categories-dashboard/categories-dashboard.component.scss
index f50a1a6..198198b 100644
--- a/src/app/features/admin/categories/components/categories-dashboard/categories-dashboard.component.scss
+++ b/src/app/features/admin/categories/components/categories-dashboard/categories-dashboard.component.scss
@@ -29,13 +29,13 @@
 
   h4 {
     margin: 0;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 700;
   }
 
   p {
     margin: 0;
     color: var(--text-secondary, #5f6e6a);
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 }
diff --git a/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss b/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss
index 36ec762..79124d8 100644
--- a/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss
+++ b/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss
@@ -17,7 +17,7 @@
 }
 
 .category-health__percent {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   color: var(--text-secondary, #5f6e6a);
 }
@@ -28,7 +28,7 @@
   padding: 0;
   display: grid;
   gap: 4px;
-  font-size: 0.78rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary, #5f6e6a);
 
   li {
diff --git a/src/app/features/admin/customers/pages/admin-customer-detail-page.component.scss b/src/app/features/admin/customers/pages/admin-customer-detail-page.component.scss
index 25bc2c9..4c8122a 100644
--- a/src/app/features/admin/customers/pages/admin-customer-detail-page.component.scss
+++ b/src/app/features/admin/customers/pages/admin-customer-detail-page.component.scss
@@ -1,12 +1,12 @@
 .customer-detail { max-width: 1000px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
 .toolbar { display: flex; align-items: center; gap: 12px; }
-.toolbar h1 { margin: 0; font-size: 1.25rem; }
+.toolbar h1 { margin: 0; font-size: var(--font-size-2xl, 1.25rem); }
 .grid { display: grid; gap: 16px; }
 .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 14px; display: grid; gap: 6px; }
 .card h3 { margin: 0 0 6px; }
 .card p { margin: 0; }
-.muted { color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
+.muted { color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); }
 .order-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle, #e7ece9); }
 .link-button { all: unset; cursor: pointer; color: var(--brand-primary, #1e8a6e); font-weight: 600; }
 .link-button:hover, .link-button:focus-visible { text-decoration: underline; }
diff --git a/src/app/features/admin/dashboard/components/dashboard-card.component.scss b/src/app/features/admin/dashboard/components/dashboard-card.component.scss
index 4c242d3..0de95a2 100644
--- a/src/app/features/admin/dashboard/components/dashboard-card.component.scss
+++ b/src/app/features/admin/dashboard/components/dashboard-card.component.scss
@@ -16,12 +16,12 @@
 
 .dashboard-card__icon {
   color: var(--primary-color);
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
 }
 
 .dashboard-card__title {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 600;
   color: var(--text-primary);
   flex: 1 1 auto;
diff --git a/src/app/features/admin/dashboard/components/dashboard-metric.component.scss b/src/app/features/admin/dashboard/components/dashboard-metric.component.scss
index fb7adba..81de96a 100644
--- a/src/app/features/admin/dashboard/components/dashboard-metric.component.scss
+++ b/src/app/features/admin/dashboard/components/dashboard-metric.component.scss
@@ -6,7 +6,7 @@
 }
 
 .dashboard-metric__label {
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -17,7 +17,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-xs);
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 600;
   color: var(--text-primary);
   overflow: hidden;
@@ -26,7 +26,7 @@
 }
 
 .dashboard-metric__badge {
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
diff --git a/src/app/features/admin/dashboard/components/dashboard-section.component.scss b/src/app/features/admin/dashboard/components/dashboard-section.component.scss
index 43b6368..3cd22d1 100644
--- a/src/app/features/admin/dashboard/components/dashboard-section.component.scss
+++ b/src/app/features/admin/dashboard/components/dashboard-section.component.scss
@@ -13,7 +13,7 @@
 
 .dashboard-section__title {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 600;
   color: var(--text-primary);
   flex: 1 1 auto;
@@ -22,7 +22,7 @@
 .dashboard-section__description {
   flex-basis: 100%;
   margin: 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
 }
 
diff --git a/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.scss b/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.scss
index 1e3b97a..332227f 100644
--- a/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.scss
+++ b/src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.scss
@@ -47,7 +47,7 @@
 }
 
 .dashboard-shortcut-card__icon {
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   color: var(--primary-color);
 }
 
@@ -56,7 +56,7 @@
 }
 
 .dashboard-shortcut-card__title {
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 600;
   color: var(--text-primary);
 }
@@ -66,7 +66,7 @@
 }
 
 .dashboard-shortcut-card__description {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
 }
 
@@ -74,7 +74,7 @@
   position: absolute;
   top: var(--space-sm);
   right: var(--space-sm);
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   padding: 2px 8px;
   border-radius: var(--radius-lg);
diff --git a/src/app/features/admin/dashboard/components/dashboard-status-row.component.scss b/src/app/features/admin/dashboard/components/dashboard-status-row.component.scss
index 7fc4738..88c21e8 100644
--- a/src/app/features/admin/dashboard/components/dashboard-status-row.component.scss
+++ b/src/app/features/admin/dashboard/components/dashboard-status-row.component.scss
@@ -3,11 +3,11 @@
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-xs) 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .dashboard-status-row__icon {
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   flex-shrink: 0;
 }
 
@@ -26,7 +26,7 @@
 }
 
 .dashboard-status-row__status-text {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-light);
   white-space: nowrap;
 }
diff --git a/src/app/features/admin/dashboard/components/dashboard-timeline.component.scss b/src/app/features/admin/dashboard/components/dashboard-timeline.component.scss
index 396f200..c111830 100644
--- a/src/app/features/admin/dashboard/components/dashboard-timeline.component.scss
+++ b/src/app/features/admin/dashboard/components/dashboard-timeline.component.scss
@@ -28,19 +28,19 @@
 
 .dashboard-timeline__icon {
   color: var(--primary-color);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   flex-shrink: 0;
 }
 
 .dashboard-timeline__label {
   flex: 1 1 auto;
   color: var(--text-primary);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   min-width: 0;
 }
 
 .dashboard-timeline__time {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-light);
   white-space: nowrap;
 }
diff --git a/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.scss b/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.scss
index 8695ade..06b96f3 100644
--- a/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.scss
+++ b/src/app/features/admin/dashboard/pages/admin-dashboard-page.component.scss
@@ -34,7 +34,7 @@
 
 .dashboard-welcome__eyebrow {
   margin: 0;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -53,7 +53,7 @@
 }
 
 .dashboard-welcome__env-badge {
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -99,7 +99,7 @@
 
 .dashboard-draft__lead {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--text-primary);
 }
 
@@ -108,7 +108,7 @@
   align-items: center;
   gap: var(--space-xs);
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--success-color);
   font-weight: 600;
 }
@@ -123,7 +123,7 @@
 }
 
 .dashboard-draft__field-chip {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   padding: 2px 8px;
   border-radius: var(--radius-lg);
   background: color-mix(in srgb, var(--primary-color) 8%, transparent);
@@ -137,7 +137,7 @@
 
 .dashboard-draft__saved-at {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
 }
 
@@ -167,7 +167,7 @@
   padding: var(--space-xs) 0;
   border: none;
   background: none;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--text-light);
   text-align: left;
   cursor: not-allowed;
@@ -179,7 +179,7 @@
 
 .dashboard-doc-list__badge {
   margin-left: auto;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   padding: 2px 8px;
   border-radius: var(--radius-lg);
diff --git a/src/app/features/admin/moderation/components/moderation-dashboard/moderation-dashboard.component.scss b/src/app/features/admin/moderation/components/moderation-dashboard/moderation-dashboard.component.scss
index fbe84ae..9a992d0 100644
--- a/src/app/features/admin/moderation/components/moderation-dashboard/moderation-dashboard.component.scss
+++ b/src/app/features/admin/moderation/components/moderation-dashboard/moderation-dashboard.component.scss
@@ -2,6 +2,6 @@
 .moderation-dashboard__metrics { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
 @media (max-width: 1100px) { .moderation-dashboard__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 @media (max-width: 640px) { .moderation-dashboard__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-.moderation-dashboard__activity h4 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; }
-.moderation-dashboard__activity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
-.moderation-dashboard__activity p { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
+.moderation-dashboard__activity h4 { margin: 0 0 8px; font-size: var(--font-size-md, 0.9375rem); font-weight: 700; }
+.moderation-dashboard__activity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
+.moderation-dashboard__activity p { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
diff --git a/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss b/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss
index 68f59e0..d87eb8d 100644
--- a/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss
+++ b/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss
@@ -1,8 +1,8 @@
 .review-health { display: grid; gap: 6px; align-items: center; }
 .review-health__bar { height: 6px; border-radius: 999px; background: var(--surface-muted, #eef2f0); overflow: hidden; }
 .review-health__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); }
-.review-health__percent { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary, #5f6e6a); }
-.review-health__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.78rem; color: var(--text-secondary, #5f6e6a); }
+.review-health__percent { font-size: var(--font-size-xs, 0.75rem); font-weight: 700; color: var(--text-secondary, #5f6e6a); }
+.review-health__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }
 .review-health__list li { display: flex; align-items: center; gap: 6px; }
 .review-health__list-item--done { color: var(--text-primary, #1e3c38); }
 .review-health--compact { grid-template-columns: 1fr auto; }
diff --git a/src/app/features/admin/moderation/pages/admin-reports-list-page.component.scss b/src/app/features/admin/moderation/pages/admin-reports-list-page.component.scss
index 812bd3c..e9837e6 100644
--- a/src/app/features/admin/moderation/pages/admin-reports-list-page.component.scss
+++ b/src/app/features/admin/moderation/pages/admin-reports-list-page.component.scss
@@ -1,6 +1,6 @@
 .admin-reports-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
 .toolbar { display: flex; align-items: center; gap: 12px; }
-.toolbar h1 { margin: 0; font-size: 1.25rem; }
+.toolbar h1 { margin: 0; font-size: var(--font-size-2xl, 1.25rem); }
 .actions { display: flex; gap: 8px; }
 .link-button { all: unset; cursor: pointer; color: var(--brand-primary, #1e8a6e); font-weight: 600; }
 .link-button:hover, .link-button:focus-visible { text-decoration: underline; }
diff --git a/src/app/features/admin/moderation/pages/admin-review-detail-page.component.scss b/src/app/features/admin/moderation/pages/admin-review-detail-page.component.scss
index 9f0b007..4ee0d8e 100644
--- a/src/app/features/admin/moderation/pages/admin-review-detail-page.component.scss
+++ b/src/app/features/admin/moderation/pages/admin-review-detail-page.component.scss
@@ -1,12 +1,12 @@
 .review-detail { max-width: 1000px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
 .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
-.toolbar h1 { margin: 0; font-size: 1.25rem; }
+.toolbar h1 { margin: 0; font-size: var(--font-size-2xl, 1.25rem); }
 .grid { display: grid; gap: 16px; }
 .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 14px; display: grid; gap: 6px; }
 .card h3 { margin: 0 0 6px; }
 .card p { margin: 0; }
-.muted { color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
+.muted { color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); }
 .photo-row { display: flex; flex-wrap: wrap; gap: 8px; }
 .photo-row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
 .workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; }
diff --git a/src/app/features/admin/moderation/pages/admin-reviews-list-page.component.scss b/src/app/features/admin/moderation/pages/admin-reviews-list-page.component.scss
index 2921771..bfd7386 100644
--- a/src/app/features/admin/moderation/pages/admin-reviews-list-page.component.scss
+++ b/src/app/features/admin/moderation/pages/admin-reviews-list-page.component.scss
@@ -9,7 +9,7 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
 .bulk-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .skeleton-rows { display: grid; gap: 8px; }
 .pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
-.admin-reviews-card__guide { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
+.admin-reviews-card__guide { margin: 0; text-align: center; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
 .health-cell { min-width: 140px; }
 
 .table-scroll {
@@ -25,8 +25,8 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
 .review-grid--compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
 .review-grid__item { position: relative; display: grid; gap: 6px; }
 .review-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
-.review-grid__meta { display: flex; justify-content: space-between; font-size: 0.85rem; }
-.review-grid__product { margin: 0; font-size: 0.78rem; color: var(--text-tertiary, #9aa6a2); }
-.review-grid__text { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.review-grid__meta { display: flex; justify-content: space-between; font-size: var(--font-size-sm, 0.8125rem); }
+.review-grid__product { margin: 0; font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); }
+.review-grid__text { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 
 @media (max-width: 640px) { .filters { flex-direction: column; align-items: stretch; } }
diff --git a/src/app/features/admin/monitoring/pages/admin-monitoring-page.component.scss b/src/app/features/admin/monitoring/pages/admin-monitoring-page.component.scss
index d0b2cd5..13d11fa 100644
--- a/src/app/features/admin/monitoring/pages/admin-monitoring-page.component.scss
+++ b/src/app/features/admin/monitoring/pages/admin-monitoring-page.component.scss
@@ -1,6 +1,6 @@
 .admin-monitoring-page { display: grid; gap: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; }
 .card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
-.card h2 { margin: 0; font-size: 1.1rem; }
+.card h2 { margin: 0; font-size: var(--font-size-xl, 1.125rem); }
 .health-grid { display: flex; flex-wrap: wrap; gap: 8px; }
 .queue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
 .queue-item { border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; padding: 10px; display: grid; gap: 4px; }
diff --git a/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss b/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss
index 315e363..1595dad 100644
--- a/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss
+++ b/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss
@@ -41,7 +41,7 @@
   display: flex;
   gap: 8px;
   align-items: center;
-  font-size: 0.78rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-tertiary, #9aa6a2);
 }
 
@@ -52,6 +52,6 @@
 
 .order-timeline__note {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #5f6e6a);
 }
diff --git a/src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.scss b/src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.scss
index 6ce28c3..71b9da3 100644
--- a/src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.scss
+++ b/src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.scss
@@ -30,7 +30,7 @@
 
 .orders-dashboard__activity h4 {
   margin: 0 0 8px;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   font-weight: 700;
 }
 
@@ -40,12 +40,12 @@
   padding: 0;
   display: grid;
   gap: 4px;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #5f6e6a);
 }
 
 .orders-dashboard__activity p {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #5f6e6a);
 }
diff --git a/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss b/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss
index 0352ff1..b96ae4e 100644
--- a/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss
+++ b/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss
@@ -1,6 +1,6 @@
 .order-detail { max-width: 1000px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
 .toolbar { display: flex; align-items: center; gap: 12px; }
-.toolbar h1 { margin: 0; font-size: 1.25rem; }
+.toolbar h1 { margin: 0; font-size: var(--font-size-2xl, 1.25rem); }
 .spacer { flex: 1; }
 .grid { display: grid; gap: 16px; }
 .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -59,7 +59,7 @@ select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde
 }
 
 .status-stepper__label {
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 600;
   color: var(--text-secondary, #5f6e6a);
 }
diff --git a/src/app/features/admin/products/components/admin-product-form.component.scss b/src/app/features/admin/products/components/admin-product-form.component.scss
index d0b9f17..5557e07 100644
--- a/src/app/features/admin/products/components/admin-product-form.component.scss
+++ b/src/app/features/admin/products/components/admin-product-form.component.scss
@@ -23,7 +23,7 @@ input[type='checkbox'] { width: auto; }
   background: var(--surface-muted, #eef2f0);
   color: var(--text-secondary, #5f6e6a);
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   padding: 2px 4px;
 
   &:hover, &:focus-visible {
@@ -45,7 +45,7 @@ input[type='checkbox'] { width: auto; }
   cursor: pointer;
   padding: 10px 14px;
   border-radius: 8px 8px 0 0;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 600;
   color: var(--text-secondary, #5f6e6a);
   display: inline-flex;
@@ -56,8 +56,8 @@ input[type='checkbox'] { width: auto; }
 }
 .form-card__tab--active { color: var(--brand-primary, #1e8a6e); background: var(--surface-muted, #eef2f0); }
 .form-card__panel { min-height: 200px; display: grid; gap: 14px; }
-.form-card__subheading { margin: 8px 0 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
-.form-card__explain { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
+.form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
+.form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
 .form-card__group { border: 1px solid var(--border-subtle, #e7ece9); border-radius: 10px; padding: 10px 14px; }
 .form-card__group summary { cursor: pointer; font-weight: 700; color: var(--text-primary, #1e3c38); }
 .toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
@@ -69,12 +69,12 @@ input[type='checkbox'] { width: auto; }
   display: grid;
   gap: 2px;
 }
-.seo-preview__title { margin: 0; color: #1a0dab; font-size: 1rem; }
-.seo-preview__url { margin: 0; color: #006621; font-size: 0.8rem; }
-.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
+.seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); }
+.seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); }
+.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); }
 .field-with-action { display: flex; gap: 8px; align-items: center; app-input { flex: 1; } }
 .seo-generate-row { display: flex; align-items: center; gap: 10px; }
-.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: 0.8rem; }
+.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
 
 .translations-block {
   border: 1px solid var(--border-color, #d3dad9);
@@ -87,7 +87,7 @@ input[type='checkbox'] { width: auto; }
     gap: 8px;
     cursor: pointer;
     font-weight: 600;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
 
     &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
   }
@@ -97,26 +97,26 @@ input[type='checkbox'] { width: auto; }
 .translations-block__count {
   margin-left: auto;
   color: var(--text-secondary, #6b7280);
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 400;
 }
 .translations-block__hint {
   margin: 0 0 10px;
   color: var(--text-secondary, #6b7280);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 .badge-manager { display: grid; gap: 10px; }
 .badge-manager__current, .badge-manager__known { display: flex; flex-wrap: wrap; gap: 6px; }
 .badge-chip {
   display: inline-flex; align-items: center; gap: 4px;
   min-height: 24px; padding: 3px 10px; border-radius: 999px;
-  color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
+  color: #fff; font-size: var(--font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase;
   border: none;
 }
 .badge-chip--add { cursor: pointer; opacity: 0.55; &:hover { opacity: 1; } &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; opacity: 1; } }
 .badge-chip__remove {
   border: none; background: transparent; color: inherit; cursor: pointer;
-  font-size: 0.9rem; line-height: 1; padding: 0 0 0 2px;
+  font-size: var(--font-size-base, 0.875rem); line-height: 1; padding: 0 0 0 2px;
   &:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
 }
 .badge-manager__custom { display: flex; gap: 8px; align-items: center; app-input { flex: 1; max-width: 260px; } }
diff --git a/src/app/features/admin/products/components/admin-products-list.component.scss b/src/app/features/admin/products/components/admin-products-list.component.scss
index 27b96c7..3bfe40d 100644
--- a/src/app/features/admin/products/components/admin-products-list.component.scss
+++ b/src/app/features/admin/products/components/admin-products-list.component.scss
@@ -12,7 +12,7 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
 .view-toggle { display: flex; gap: 2px; }
 .columns-panel { display: flex; flex-wrap: wrap; gap: 12px; }
 .health-cell { min-width: 140px; }
-.admin-products-card__guide { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
+.admin-products-card__guide { margin: 0; text-align: center; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
 
 .density-compact td, .density-compact th { padding: 4px 8px; }
 
@@ -21,9 +21,9 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
 .product-grid__item { position: relative; display: grid; gap: 6px; }
 .product-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
 .product-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); }
-.product-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-tertiary, #9aa6a2); }
-.product-grid__name { margin: 0; font-size: 0.85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.product-grid__price { margin: 0; font-size: 0.8rem; color: var(--text-secondary, #5f6e6a); }
+.product-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); }
+.product-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.product-grid__price { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
 .product-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; }
 
 .dialog-body { display: grid; gap: 12px; }
diff --git a/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss b/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss
index 0679b07..8786efd 100644
--- a/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss
+++ b/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss
@@ -17,7 +17,7 @@
 }
 
 .product-health__percent {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   color: var(--text-secondary, #5f6e6a);
 }
@@ -28,7 +28,7 @@
   padding: 0;
   display: grid;
   gap: 4px;
-  font-size: 0.78rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary, #5f6e6a);
 
   li {
diff --git a/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss b/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss
index 3f4fdbb..8708678 100644
--- a/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss
+++ b/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss
@@ -1,6 +1,6 @@
 .variants-editor { display: grid; gap: 16px; }
-.variants-editor h5 { margin: 0 0 4px; font-size: 0.9rem; }
-.variants-editor__hint { margin: 0 0 8px; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
+.variants-editor h5 { margin: 0 0 4px; font-size: var(--font-size-base, 0.875rem); }
+.variants-editor__hint { margin: 0 0 8px; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
 
 .attribute-card {
   display: grid;
@@ -15,29 +15,29 @@
 
 .attribute-card__head { display: flex; align-items: center; gap: 8px; }
 .attribute-card__tag {
-  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
+  font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.4px;
   color: var(--text-secondary, #6b7280); border: 1px solid var(--border-color, #d3dad9);
   border-radius: 999px; padding: 1px 8px;
 }
 .attribute-card__remove {
   margin-left: auto; border: none; background: transparent; cursor: pointer;
-  font-size: 1rem; color: var(--text-secondary, #6b7280);
+  font-size: var(--font-size-lg, 1rem); color: var(--text-secondary, #6b7280);
   &:hover { color: var(--danger-color, #c0392b); }
 }
 
 .attribute-card__values { display: flex; flex-wrap: wrap; gap: 6px; }
 .attribute-card__add { display: flex; align-items: center; gap: 8px; }
-.attribute-card__color-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
+.attribute-card__color-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm, 0.8125rem); }
 
 .value-chip {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 3px 8px; border-radius: 999px;
   border: 1px solid var(--border-color, #d3dad9);
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 
   button {
     border: none; background: transparent; cursor: pointer; padding: 0;
-    color: var(--text-secondary, #6b7280); font-size: 0.85rem; line-height: 1;
+    color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); line-height: 1;
   }
 }
 
@@ -63,7 +63,7 @@
 .variant-card__combo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .variant-card__remove {
   margin-left: auto; border: none; background: transparent; cursor: pointer;
-  color: var(--text-secondary, #6b7280); font-size: 0.8rem; text-decoration: underline;
+  color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); text-decoration: underline;
 }
 
 .variant-card__fields {
@@ -71,7 +71,7 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
 
-  label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--text-secondary, #6b7280); }
+  label { display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }
 }
 
 .variant-card__prices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -82,7 +82,7 @@
 
   button { border: none; background: transparent; cursor: pointer; color: var(--text-secondary, #6b7280); }
 }
-.price-row__currency { font-weight: 700; font-size: 0.8rem; min-width: 32px; }
+.price-row__currency { font-weight: 700; font-size: var(--font-size-sm, 0.8125rem); min-width: 32px; }
 .price-row--add { gap: 4px; }
 
 @media (max-width: 640px) {
diff --git a/src/app/features/admin/products/components/products-dashboard/products-dashboard.component.scss b/src/app/features/admin/products/components/products-dashboard/products-dashboard.component.scss
index 2ced2a9..29de639 100644
--- a/src/app/features/admin/products/components/products-dashboard/products-dashboard.component.scss
+++ b/src/app/features/admin/products/components/products-dashboard/products-dashboard.component.scss
@@ -42,14 +42,14 @@
 
   h4 {
     margin: 0;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 700;
   }
 
   p {
     margin: 0;
     color: var(--text-secondary, #5f6e6a);
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 }
 
@@ -65,7 +65,7 @@
   all: unset;
   cursor: pointer;
   color: var(--brand-primary, #1e8a6e);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 
   &:hover, &:focus-visible {
     text-decoration: underline;
@@ -73,5 +73,5 @@
 }
 
 .products-dashboard__hint {
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
diff --git a/src/app/features/admin/shell/admin-layout.component.scss b/src/app/features/admin/shell/admin-layout.component.scss
index a1d187c..28dd71e 100644
--- a/src/app/features/admin/shell/admin-layout.component.scss
+++ b/src/app/features/admin/shell/admin-layout.component.scss
@@ -113,7 +113,7 @@
 
 .admin-layout__nav-group {
   padding: var(--space-md) var(--space-sm) var(--space-xs);
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -130,13 +130,13 @@
   background: none;
   border-radius: var(--radius-sm);
   color: var(--text-primary);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
 
   .pi {
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     width: 1.2rem;
     flex-shrink: 0;
   }
@@ -170,7 +170,7 @@
 
 .admin-layout__soon-badge {
   margin-left: auto;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   padding: 2px 8px;
   border-radius: var(--radius-lg);
@@ -227,7 +227,7 @@
     list-style: none;
     margin: 0 0 2px;
     padding: 0;
-    font-size: 0.7rem;
+    font-size: var(--font-size-xs, 0.75rem);
     color: var(--text-light);
   }
 
@@ -262,7 +262,7 @@
 
 .admin-layout__title {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 600;
   line-height: 1.3;
   white-space: nowrap;
@@ -272,7 +272,7 @@
 
 .admin-layout__description {
   margin: 2px 0 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
   white-space: nowrap;
   overflow: hidden;
@@ -297,7 +297,7 @@
     border-radius: var(--radius-field, var(--radius-sm));
     background: var(--bg-secondary);
     color: var(--text-primary);
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
 
     &:focus-visible {
       outline: 2px solid var(--primary-color);
@@ -312,7 +312,7 @@
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-light);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .admin-layout__icon-button {
@@ -357,7 +357,7 @@
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--text-secondary);
   z-index: 25;
 
@@ -383,13 +383,13 @@
   border-radius: 50%;
   background: var(--primary-color);
   color: #fff;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   flex-shrink: 0;
 }
 
 .admin-layout__account-name {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   max-width: 140px;
   overflow: hidden;
diff --git a/src/app/features/admin/users/pages/admin-users-page.component.scss b/src/app/features/admin/users/pages/admin-users-page.component.scss
index f6deac4..138ab53 100644
--- a/src/app/features/admin/users/pages/admin-users-page.component.scss
+++ b/src/app/features/admin/users/pages/admin-users-page.component.scss
@@ -1,7 +1,7 @@
 .admin-users-page { display: grid; gap: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; }
 .card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
-.card h2 { margin: 0; font-size: 1.1rem; }
-.hint { margin: 0; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
+.card h2 { margin: 0; font-size: var(--font-size-xl, 1.125rem); }
+.hint { margin: 0; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
 .invite-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
 select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
 .actions { display: flex; gap: 8px; flex-wrap: wrap; }
diff --git a/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss b/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss
index 42c3792..b3fde4f 100644
--- a/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss
+++ b/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss
@@ -26,18 +26,18 @@
 
 .asset-details__facts dt {
   color: var(--text-tertiary, #9aa6a2);
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .asset-details__facts dd {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-primary, #1e3c38);
 }
 
 .asset-details__usage h4 {
   margin: 0 0 6px;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 .asset-details__usage ul {
@@ -52,7 +52,7 @@
 .asset-details__hint {
   margin: 0;
   color: var(--text-secondary, #5f6e6a);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .asset-details__edit {
@@ -65,7 +65,7 @@
 .asset-details__warning {
   margin: 0;
   color: var(--danger, #c0392b);
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .asset-details__actions {
diff --git a/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss b/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss
index deed043..a22dfee 100644
--- a/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss
+++ b/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss
@@ -42,7 +42,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary, #5f6e6a);
   text-align: center;
   padding: 8px;
@@ -54,7 +54,7 @@
 }
 
 .asset-tile__filename {
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 700;
   color: var(--text-primary, #1e3c38);
   overflow: hidden;
@@ -63,7 +63,7 @@
 }
 
 .asset-tile__sub {
-  font-size: 0.72rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-tertiary, #9aa6a2);
 }
 
diff --git a/src/app/features/backoffice/media/media-library-page.component.scss b/src/app/features/backoffice/media/media-library-page.component.scss
index 7b2ad7b..b1368c1 100644
--- a/src/app/features/backoffice/media/media-library-page.component.scss
+++ b/src/app/features/backoffice/media/media-library-page.component.scss
@@ -48,7 +48,7 @@
   padding: 14px;
   text-align: center;
   color: var(--text-tertiary, #9aa6a2);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .media-page__dropzone--active {
@@ -75,7 +75,7 @@
 
 .media-page__guide {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #5f6e6a);
   text-align: center;
 }
@@ -92,6 +92,6 @@
   align-items: center;
   gap: 10px;
   color: var(--danger, #c0392b);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   margin: 0;
 }
diff --git a/src/app/features/backoffice/shared/backoffice-coming-soon-page.component.scss b/src/app/features/backoffice/shared/backoffice-coming-soon-page.component.scss
index 4c90f07..9286929 100644
--- a/src/app/features/backoffice/shared/backoffice-coming-soon-page.component.scss
+++ b/src/app/features/backoffice/shared/backoffice-coming-soon-page.component.scss
@@ -11,7 +11,7 @@
 
 .coming-soon__title {
   margin: 0;
-  font-size: 24px;
+  font-size: var(--font-size-3xl, 1.5rem);
   font-weight: 800;
   color: var(--text-primary, #1e3c38);
 }
diff --git a/src/app/features/content-management/components/content-dashboard/content-dashboard.component.scss b/src/app/features/content-management/components/content-dashboard/content-dashboard.component.scss
index 53484db..56e1af0 100644
--- a/src/app/features/content-management/components/content-dashboard/content-dashboard.component.scss
+++ b/src/app/features/content-management/components/content-dashboard/content-dashboard.component.scss
@@ -35,14 +35,14 @@
 
   h4 {
     margin: 0;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 700;
   }
 
   p {
     margin: 0;
     color: var(--text-secondary, #5f6e6a);
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 }
 
diff --git a/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss b/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss
index 8df628c..3b247fa 100644
--- a/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss
+++ b/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss
@@ -10,14 +10,14 @@
 
   h4 {
     margin: 0;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 700;
     color: var(--text-primary, #1e3c38);
   }
 }
 
 .health-widget__percent {
-  font-size: 1.05rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 800;
   color: var(--brand-primary, #1e8a6e);
 }
@@ -41,7 +41,7 @@
   padding: 0;
   display: grid;
   gap: 6px;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #5f6e6a);
 
   li {
diff --git a/src/app/features/content-management/components/page-card/page-card.component.scss b/src/app/features/content-management/components/page-card/page-card.component.scss
index 40a7537..c23d7a9 100644
--- a/src/app/features/content-management/components/page-card/page-card.component.scss
+++ b/src/app/features/content-management/components/page-card/page-card.component.scss
@@ -20,7 +20,7 @@
 }
 
 .page-card-tile__icon {
-  font-size: 1.5rem;
+  font-size: var(--font-size-3xl, 1.5rem);
   line-height: 1;
   flex-shrink: 0;
 }
@@ -40,7 +40,7 @@
 
 .page-card-tile__title {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 700;
   color: var(--text-primary, #1e3c38);
   overflow: hidden;
@@ -50,7 +50,7 @@
 
 .page-card-tile__slug {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #5f6e6a);
   font-family: monospace;
 }
@@ -64,13 +64,13 @@
 }
 
 .page-card-tile__visibility {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-tertiary, #9aa6a2);
 }
 
 .page-card-tile__updated {
   margin: 4px 0 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-tertiary, #9aa6a2);
 }
 
diff --git a/src/app/features/content-management/components/page-editor/page-editor.component.scss b/src/app/features/content-management/components/page-editor/page-editor.component.scss
index 01c08e6..9e99e94 100644
--- a/src/app/features/content-management/components/page-editor/page-editor.component.scss
+++ b/src/app/features/content-management/components/page-editor/page-editor.component.scss
@@ -13,7 +13,7 @@
 
 .page-editor__title {
   margin: 0;
-  font-size: 1.15rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 700;
   color: var(--text-primary, #1e3c38);
   flex: 1;
@@ -38,7 +38,7 @@
   cursor: pointer;
   padding: 10px 14px;
   border-radius: 8px 8px 0 0;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 600;
   color: var(--text-secondary, #5f6e6a);
   display: inline-flex;
@@ -67,7 +67,7 @@
 
 .page-editor__explain {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #5f6e6a);
 }
 
@@ -92,7 +92,7 @@
 }
 
 .media-block__label {
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 700;
   color: var(--text-primary, #1e3c38);
 }
@@ -129,6 +129,6 @@
 
 .page-editor__error {
   color: var(--danger, #c0392b);
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   margin: 0;
 }
diff --git a/src/app/features/content-management/components/static-page-preview/static-page-preview.component.scss b/src/app/features/content-management/components/static-page-preview/static-page-preview.component.scss
index 34e5fba..e60888d 100644
--- a/src/app/features/content-management/components/static-page-preview/static-page-preview.component.scss
+++ b/src/app/features/content-management/components/static-page-preview/static-page-preview.component.scss
@@ -29,7 +29,7 @@
 
 .static-page-preview__title {
   margin: 0 0 1rem;
-  font-size: 1.5rem;
+  font-size: var(--font-size-3xl, 1.5rem);
   font-weight: 700;
   color: var(--text-primary, #1e3c38);
 }
diff --git a/src/app/features/diagnostics/components/diagnostics-page.component.scss b/src/app/features/diagnostics/components/diagnostics-page.component.scss
index 4bf9f88..94d6d0a 100644
--- a/src/app/features/diagnostics/components/diagnostics-page.component.scss
+++ b/src/app/features/diagnostics/components/diagnostics-page.component.scss
@@ -26,7 +26,7 @@
 }
 
 .health-score strong {
-  font-size: 2rem;
+  font-size: var(--font-size-4xl, 2rem);
   color: #1e3c38;
 }
 
@@ -85,7 +85,7 @@
 .severity {
   font-weight: 800;
   text-transform: uppercase;
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 @media (max-width: 800px) {
diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
index 850515d..aad2e47 100644
--- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
+++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
@@ -41,10 +41,10 @@
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-primary, #1e3c38);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   cursor: pointer;
 
-  .pi { font-size: 0.85rem; }
+  .pi { font-size: var(--font-size-sm, 0.8125rem); }
 
   &:hover { background: var(--bg-tertiary, #e8ecea); }
   &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 1px; }
@@ -53,7 +53,7 @@
 .html-editor-toolbar__btn--bold { font-weight: 700; }
 .html-editor-toolbar__btn--italic { font-style: italic; font-family: serif; }
 .html-editor-toolbar__btn--underline { text-decoration: underline; }
-.html-editor-toolbar__btn--wide { padding: 0 10px; font-size: 0.8rem; color: var(--text-secondary, #6b7280); }
+.html-editor-toolbar__btn--wide { padding: 0 10px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }
 
 .html-editor-surface {
   min-height: 160px;
@@ -66,5 +66,5 @@
 .html-editor-code-error {
   margin: 0;
   color: var(--error-color, #991b1b);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
diff --git a/src/app/features/project-editor/components/project-editor-nav.component.scss b/src/app/features/project-editor/components/project-editor-nav.component.scss
index 9663aa6..730f794 100644
--- a/src/app/features/project-editor/components/project-editor-nav.component.scss
+++ b/src/app/features/project-editor/components/project-editor-nav.component.scss
@@ -14,12 +14,12 @@
 
 .editor-nav-group__icon {
   color: var(--primary-color);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .editor-nav-group__label {
   flex: 1 1 auto;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -27,7 +27,7 @@
 }
 
 .editor-nav-group__status {
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .editor-nav-group__status--complete {
@@ -67,7 +67,7 @@
   color: var(--text-primary);
   padding: 0 var(--space-sm);
   font-weight: 500;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   cursor: pointer;
   text-decoration: none;
 
@@ -89,7 +89,7 @@
 }
 
 .editor-nav-link__status {
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   flex-shrink: 0;
 }
 
@@ -128,7 +128,7 @@
   border-radius: var(--radius-lg);
   background: var(--error-color);
   color: #fff;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 700;
   line-height: 1;
   flex-shrink: 0;
diff --git a/src/app/features/project-editor/pages/builder-overview-page.component.scss b/src/app/features/project-editor/pages/builder-overview-page.component.scss
index dc52e6c..e1d0af2 100644
--- a/src/app/features/project-editor/pages/builder-overview-page.component.scss
+++ b/src/app/features/project-editor/pages/builder-overview-page.component.scss
@@ -12,7 +12,7 @@
   align-items: center;
   gap: var(--space-xs);
   align-self: flex-start;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 500;
   color: var(--text-secondary);
   text-decoration: none;
@@ -39,7 +39,7 @@
 
 .builder-overview__eyebrow {
   margin: 0;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -54,7 +54,7 @@
 
 .builder-overview__subtitle {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: rgba(255, 255, 255, 0.9);
 }
 
@@ -83,7 +83,7 @@
 
 .builder-overview__readiness-hint {
   margin: 2px 0 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: rgba(255, 255, 255, 0.8);
 }
 
@@ -97,13 +97,13 @@
   background: rgba(255, 255, 255, 0.12);
 
   .pi {
-    font-size: 1.25rem;
+    font-size: var(--font-size-2xl, 1.25rem);
   }
 }
 
 .builder-overview__next-step-label {
   margin: 0;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -113,7 +113,7 @@
 .builder-overview__next-step-link {
   color: #fff;
   font-weight: 600;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   text-decoration: underline;
 }
 
@@ -129,7 +129,7 @@
 
   h2 {
     margin: 0;
-    font-size: 1.125rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 600;
     color: var(--text-primary);
   }
@@ -178,7 +178,7 @@
 }
 
 .builder-overview__card-status {
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .builder-overview__card-status--complete {
@@ -200,20 +200,20 @@
 
 .builder-overview__card-title {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 600;
   color: var(--text-primary);
 }
 
 .builder-overview__card-description {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
   flex: 1 1 auto;
 }
 
 .builder-overview__card-cta {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   color: var(--primary-color);
 }
@@ -234,7 +234,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-xs);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--text-primary);
 }
 
diff --git a/src/app/features/project-editor/pages/project-editor-page.component.scss b/src/app/features/project-editor/pages/project-editor-page.component.scss
index 16af4cc..5a7b965 100644
--- a/src/app/features/project-editor/pages/project-editor-page.component.scss
+++ b/src/app/features/project-editor/pages/project-editor-page.component.scss
@@ -59,7 +59,7 @@
   margin-bottom: var(--space-md);
   border-radius: var(--radius-sm);
   color: var(--text-secondary);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   text-decoration: none;
 
   &:hover {
@@ -118,7 +118,7 @@
     list-style: none;
     margin: 0 0 4px;
     padding: 0;
-    font-size: 0.7rem;
+    font-size: var(--font-size-xs, 0.75rem);
     color: var(--text-light);
   }
 
@@ -166,7 +166,7 @@
 }
 
 .project-editor-layout__badge {
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -191,7 +191,7 @@
 
 .project-editor-layout__description {
   margin: var(--space-xs) 0 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--text-secondary);
   max-width: 65ch;
 }
@@ -232,7 +232,7 @@
 
   h2 {
     margin: 0 0 4px;
-    font-size: 0.7rem;
+    font-size: var(--font-size-xs, 0.75rem);
     font-weight: 700;
     letter-spacing: 0.4px;
     text-transform: uppercase;
@@ -241,7 +241,7 @@
 
   p {
     margin: 0;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: var(--text-secondary);
   }
 }
diff --git a/src/app/features/project-editor/sections/brand/brand-overview.component.scss b/src/app/features/project-editor/sections/brand/brand-overview.component.scss
index cb3eb53..38e2a35 100644
--- a/src/app/features/project-editor/sections/brand/brand-overview.component.scss
+++ b/src/app/features/project-editor/sections/brand/brand-overview.component.scss
@@ -25,7 +25,7 @@
   display: grid;
   place-items: center;
   font-weight: 700;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   color: var(--text-primary);
 
   span {
@@ -44,14 +44,14 @@
 
   h2 {
     margin: 0;
-    font-size: 1.125rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 600;
     color: var(--text-primary);
   }
 
   p {
     margin: 4px 0 0;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: var(--text-secondary);
   }
 }
@@ -69,7 +69,7 @@
 }
 
 .brand-overview__last-saved {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-light);
 }
 
@@ -85,11 +85,11 @@
     display: flex;
     align-items: center;
     gap: var(--space-xs);
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: var(--text-light);
 
     .pi {
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
     }
   }
 }
@@ -116,7 +116,7 @@
 
   h3 {
     margin: 0 0 var(--space-sm);
-    font-size: 0.7rem;
+    font-size: var(--font-size-xs, 0.75rem);
     font-weight: 700;
     letter-spacing: 0.4px;
     text-transform: uppercase;
@@ -146,7 +146,7 @@
 }
 
 .brand-overview__swatch-label {
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-light);
   text-align: center;
 }
@@ -160,7 +160,7 @@
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--warning-color) 12%, transparent);
   color: var(--warning-color);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
 }
 
@@ -173,7 +173,7 @@
 
 .brand-overview__type-heading {
   margin: 0 0 4px;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 700;
   color: var(--text-primary);
 }
@@ -206,19 +206,19 @@
 .brand-overview__social-title {
   margin: 0;
   font-weight: 600;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--text-primary);
 }
 
 .brand-overview__social-desc {
   margin: 2px 0 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
 }
 
 .brand-overview__social-empty {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-light);
 }
 
diff --git a/src/app/features/project-editor/sections/footer-section.component.scss b/src/app/features/project-editor/sections/footer-section.component.scss
index e99096e..8f84aba 100644
--- a/src/app/features/project-editor/sections/footer-section.component.scss
+++ b/src/app/features/project-editor/sections/footer-section.component.scss
@@ -12,7 +12,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--text-secondary, #6b7280);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 
   &:hover { color: var(--danger-color, #c0392b); }
 }
@@ -52,7 +52,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--text-secondary, #6b7280);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 
   &:hover { color: var(--danger-color, #c0392b); }
 }
diff --git a/src/app/features/project-editor/sections/homepage-section.component.scss b/src/app/features/project-editor/sections/homepage-section.component.scss
index 8794cca..8879b54 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.scss
+++ b/src/app/features/project-editor/sections/homepage-section.component.scss
@@ -29,15 +29,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.2rem;
+  font-size: var(--font-size-2xl, 1.25rem);
   color: var(--color-primary, #2f8f5b);
 }
 
 .block-card__title-row { display: flex; align-items: center; gap: 8px; }
-.block-card__desc { margin: 2px 0 8px; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
+.block-card__desc { margin: 2px 0 8px; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
 
 .block-card__hidden-badge {
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   text-transform: uppercase;
   letter-spacing: 0.4px;
   color: var(--text-secondary, #6b7280);
@@ -62,7 +62,7 @@
   }
 }
 
-.block-card__visible-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
+.block-card__visible-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm, 0.8125rem); }
 .block-card__remove:hover { color: var(--danger-color, #c0392b); }
 
 .block-catalog { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color, #d3dad9); }
@@ -83,10 +83,10 @@
   border-radius: var(--radius-sm);
   background: var(--bg-secondary, #f7f8f8);
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-primary, #1e3c38);
 
-  .pi { font-size: 1.2rem; color: var(--color-primary, #2f8f5b); }
+  .pi { font-size: var(--font-size-2xl, 1.25rem); color: var(--color-primary, #2f8f5b); }
 
   &:hover { border-color: var(--color-primary, #2f8f5b); background: #fff; }
   &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
diff --git a/src/app/features/project-editor/sections/homepage/homepage-overview.component.scss b/src/app/features/project-editor/sections/homepage/homepage-overview.component.scss
index c8b577c..c9f303d 100644
--- a/src/app/features/project-editor/sections/homepage/homepage-overview.component.scss
+++ b/src/app/features/project-editor/sections/homepage/homepage-overview.component.scss
@@ -25,7 +25,7 @@
   display: grid;
   place-items: center;
   font-weight: 700;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   color: var(--text-primary);
 
   span {
@@ -44,20 +44,20 @@
 
   h2 {
     margin: 0;
-    font-size: 1.125rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 600;
     color: var(--text-primary);
   }
 
   p {
     margin: 4px 0 0;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: var(--text-secondary);
   }
 }
 
 .homepage-overview__counts {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
 }
 
 .homepage-overview__next-step {
@@ -73,7 +73,7 @@
 }
 
 .homepage-overview__last-saved {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-light);
 }
 
@@ -89,11 +89,11 @@
     display: flex;
     align-items: center;
     gap: var(--space-xs);
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: var(--text-light);
 
     .pi {
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
     }
   }
 }
diff --git a/src/app/features/project-editor/sections/section.shared.scss b/src/app/features/project-editor/sections/section.shared.scss
index c01a1f7..f408119 100644
--- a/src/app/features/project-editor/sections/section.shared.scss
+++ b/src/app/features/project-editor/sections/section.shared.scss
@@ -45,7 +45,7 @@ app-form-field.full {
 .field-desc {
   display: block;
   font-weight: 400;
-  font-size: 12px;
+  font-size: var(--font-size-xs, 0.75rem);
   line-height: 1.4;
   color: var(--text-secondary, #5f6e6a);
   margin: -2px 0 2px;
@@ -196,7 +196,7 @@ button.secondary {
 .preview-changes {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 
   th,
   td {
@@ -235,9 +235,9 @@ button.secondary {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 4px 10px; border-radius: 999px;
   border: 1px solid var(--border-color, #d3dad9);
-  font-size: 0.8rem; font-weight: 600;
-  em { font-style: normal; font-weight: 400; font-size: 0.7rem; color: var(--text-secondary, #6b7280); }
+  font-size: var(--font-size-sm, 0.8125rem); font-weight: 600;
+  em { font-style: normal; font-weight: 400; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }
 }
 .languages-summary__chip--default { border-color: var(--color-primary, #2f8f5b); }
-.languages-summary__manage { font-size: 0.85rem; text-decoration: underline; color: var(--text-primary, #1e3c38); }
+.languages-summary__manage { font-size: var(--font-size-sm, 0.8125rem); text-decoration: underline; color: var(--text-primary, #1e3c38); }
 .languages-summary__manage:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
diff --git a/src/app/features/project-editor/sections/widgets-section.component.scss b/src/app/features/project-editor/sections/widgets-section.component.scss
index 234c55c..9cb4952 100644
--- a/src/app/features/project-editor/sections/widgets-section.component.scss
+++ b/src/app/features/project-editor/sections/widgets-section.component.scss
@@ -11,14 +11,14 @@
 }
 
 .widget-card__icon {
-  font-size: 1.25rem;
+  font-size: var(--font-size-2xl, 1.25rem);
   color: var(--primary-color);
   flex-shrink: 0;
 }
 
 .widget-card__title {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 600;
   color: var(--text-primary);
   flex: 1 1 auto;
@@ -26,7 +26,7 @@
 }
 
 .widget-card__hidden-badge {
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: uppercase;
@@ -80,7 +80,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
 }
 
@@ -89,13 +89,13 @@
 
   summary {
     cursor: pointer;
-    font-size: 0.75rem;
+    font-size: var(--font-size-xs, 0.75rem);
     font-weight: 600;
     color: var(--text-light);
   }
 }
 
-.widget-card__subheading { margin: 12px 0 4px; font-size: 0.9rem; }
+.widget-card__subheading { margin: 12px 0 4px; font-size: var(--font-size-base, 0.875rem); }
 
 .hero-slide-row {
   display: flex;
@@ -111,7 +111,7 @@
   background: transparent;
   cursor: pointer;
   color: var(--text-secondary, #6b7280);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 
   &:hover { color: var(--danger-color, #c0392b); }
 }
diff --git a/src/app/features/search/components/search-bar/search-bar.component.scss b/src/app/features/search/components/search-bar/search-bar.component.scss
index a01f5aa..529ff99 100644
--- a/src/app/features/search/components/search-bar/search-bar.component.scss
+++ b/src/app/features/search/components/search-bar/search-bar.component.scss
@@ -63,7 +63,7 @@
   border-radius: var(--radius-sm);
   background: var(--bg-primary) !important;
   color: var(--text-secondary) !important;
-  font-size: 1.2rem;
+  font-size: var(--font-size-2xl, 1.25rem);
   line-height: 1;
 }
 
@@ -98,7 +98,7 @@
 }
 
 .suggestion-icon {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   text-transform: uppercase;
   color: var(--text-secondary);
 }
@@ -114,7 +114,7 @@
 .suggestion-copy small,
 .suggestion-type {
   color: var(--text-secondary);
-  font-size: 0.78rem;
+  font-size: var(--font-size-xs, 0.75rem);
 }
 
 .chip-list {
diff --git a/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss b/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss
index c9f4525..ac56615 100644
--- a/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss
+++ b/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss
@@ -39,7 +39,7 @@
 
 .catalog-empty-state__content h2 {
   color: var(--text-primary);
-  font-size: 1.3rem;
+  font-size: var(--font-size-3xl, 1.5rem);
 }
 
 .catalog-empty-state__category {
diff --git a/src/app/features/website/catalog/components/category-grid/category-grid.component.scss b/src/app/features/website/catalog/components/category-grid/category-grid.component.scss
index 951ceb1..b7b4bfe 100644
--- a/src/app/features/website/catalog/components/category-grid/category-grid.component.scss
+++ b/src/app/features/website/catalog/components/category-grid/category-grid.component.scss
@@ -70,7 +70,7 @@
 
 .catalog-category-title {
   color: #1e3c38;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 800;
   line-height: 1.25;
   display: -webkit-box;
@@ -90,7 +90,7 @@
     border-radius: 999px;
     background: rgba(73, 118, 113, 0.1);
     color: #3d635f;
-    font-size: 0.8rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     font-weight: 700;
     white-space: nowrap;
   }
diff --git a/src/app/features/website/catalog/components/filters-panel/filters-panel.component.scss b/src/app/features/website/catalog/components/filters-panel/filters-panel.component.scss
index 2ecb764..fb49e4a 100644
--- a/src/app/features/website/catalog/components/filters-panel/filters-panel.component.scss
+++ b/src/app/features/website/catalog/components/filters-panel/filters-panel.component.scss
@@ -33,7 +33,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   font-weight: 700;
   text-align: left;
   cursor: pointer;
@@ -42,7 +42,7 @@
 
 .filter-group-chevron {
   color: var(--text-secondary);
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   transition: transform 0.2s ease;
 }
 
@@ -82,7 +82,7 @@
 .filter-group h4,
 .range-field span {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-weight: 700;
   letter-spacing: 0.02em;
   text-transform: uppercase;
diff --git a/src/app/features/website/catalog/components/sorting-control/sorting-control.component.scss b/src/app/features/website/catalog/components/sorting-control/sorting-control.component.scss
index b623352..87f561c 100644
--- a/src/app/features/website/catalog/components/sorting-control/sorting-control.component.scss
+++ b/src/app/features/website/catalog/components/sorting-control/sorting-control.component.scss
@@ -9,7 +9,7 @@
 
 .catalog-sorting span {
   color: var(--text-secondary);
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 700;
 }
 
diff --git a/src/app/features/website/catalog/containers/catalog-container.component.scss b/src/app/features/website/catalog/containers/catalog-container.component.scss
index c80a57e..42dd644 100644
--- a/src/app/features/website/catalog/containers/catalog-container.component.scss
+++ b/src/app/features/website/catalog/containers/catalog-container.component.scss
@@ -45,7 +45,7 @@
 .catalog-root-link {
   width: fit-content;
   color: #1e3c38;
-  font-size: 2rem;
+  font-size: var(--font-size-4xl, 2rem);
   font-weight: 900;
   text-decoration: none;
 }
@@ -63,7 +63,7 @@
   gap: 8px;
   flex-wrap: wrap;
   color: #697777;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
 
   a,
   button {
@@ -239,7 +239,7 @@
 .catalog-sort-sheet-head h2 {
   margin: 0;
   color: var(--text-primary);
-  font-size: 1.05rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .catalog-icon-btn {
@@ -249,7 +249,7 @@
   border-radius: 50%;
   background: var(--bg-primary);
   color: var(--text-primary);
-  font-size: 1.15rem;
+  font-size: var(--font-size-xl, 1.125rem);
   line-height: 1;
   cursor: pointer;
 }
@@ -397,14 +397,14 @@
   h1 {
     margin: 0;
     color: #1e3c38;
-    font-size: 1.75rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 900;
   }
 
   p {
     margin: 0;
     color: #697777;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
   }
 }
 
@@ -462,7 +462,7 @@
   h2 {
     margin: 0;
     color: #1e3c38;
-    font-size: 1.35rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 
   p {
@@ -558,7 +558,7 @@
   }
 
   .catalog-root-link {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 
   .catalog-mobile-toolbar {
@@ -572,7 +572,7 @@
   }
 
   .catalog-section-heading h1 {
-    font-size: 1.35rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 
   .catalog-loading {
diff --git a/src/app/features/website/product/components/delivery-information/delivery-information.component.scss b/src/app/features/website/product/components/delivery-information/delivery-information.component.scss
index 253454f..8d66816 100644
--- a/src/app/features/website/product/components/delivery-information/delivery-information.component.scss
+++ b/src/app/features/website/product/components/delivery-information/delivery-information.component.scss
@@ -10,7 +10,7 @@
   h2 {
     margin: 0;
     color: #1e3c38;
-    font-size: 1.05rem;
+    font-size: var(--font-size-lg, 1rem);
   }
 }
 
diff --git a/src/app/features/website/product/components/product-gallery/product-gallery.component.scss b/src/app/features/website/product/components/product-gallery/product-gallery.component.scss
index 9e339cf..ee7c32c 100644
--- a/src/app/features/website/product/components/product-gallery/product-gallery.component.scss
+++ b/src/app/features/website/product/components/product-gallery/product-gallery.component.scss
@@ -125,7 +125,7 @@
   color: #fff;
   border-radius: 999px;
   padding: 2px 8px;
-  font-size: 0.7rem;
+  font-size: var(--font-size-xs, 0.75rem);
   text-transform: uppercase;
 }
 
diff --git a/src/app/features/website/product/components/product-information/product-information.component.scss b/src/app/features/website/product/components/product-information/product-information.component.scss
index 9c11b62..0f94cb3 100644
--- a/src/app/features/website/product/components/product-information/product-information.component.scss
+++ b/src/app/features/website/product/components/product-information/product-information.component.scss
@@ -30,7 +30,7 @@
   border-radius: 999px;
   background: #497671;
   color: #fff;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 900;
   text-transform: uppercase;
 }
@@ -51,7 +51,7 @@
 
   strong {
     color: #1e3c38;
-    font-size: 2rem;
+    font-size: var(--font-size-4xl, 2rem);
     line-height: 1;
   }
 }
@@ -96,7 +96,7 @@
   border-radius: 13px;
   background: #497671;
   color: #fff;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 900;
   cursor: pointer;
   transition: transform 0.2s ease, background-color 0.2s ease;
diff --git a/src/app/features/website/product/components/product-specifications/product-specifications.component.scss b/src/app/features/website/product/components/product-specifications/product-specifications.component.scss
index 25082cd..8c00b02 100644
--- a/src/app/features/website/product/components/product-specifications/product-specifications.component.scss
+++ b/src/app/features/website/product/components/product-specifications/product-specifications.component.scss
@@ -16,7 +16,7 @@ h3 {
 h4 {
   margin: 0;
   color: var(--text-primary);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 dl {
diff --git a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
index 410fe15..510fe3c 100644
--- a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
+++ b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss
@@ -12,7 +12,7 @@
 
 .variant-label {
   color: #697777;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 800;
 }
 
diff --git a/src/app/features/website/product/engagement/components/product-tabs/product-tabs.component.scss b/src/app/features/website/product/engagement/components/product-tabs/product-tabs.component.scss
index 3cf39f2..064cbee 100644
--- a/src/app/features/website/product/engagement/components/product-tabs/product-tabs.component.scss
+++ b/src/app/features/website/product/engagement/components/product-tabs/product-tabs.component.scss
@@ -21,7 +21,7 @@
 }
 
 .tab-btn small {
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
 }
 
diff --git a/src/app/features/website/product/engagement/components/question-card/question-card.component.scss b/src/app/features/website/product/engagement/components/question-card/question-card.component.scss
index 2b4ee28..7ec4c64 100644
--- a/src/app/features/website/product/engagement/components/question-card/question-card.component.scss
+++ b/src/app/features/website/product/engagement/components/question-card/question-card.component.scss
@@ -46,7 +46,7 @@ header {
 .accepted-pill {
   border-radius: 999px;
   padding: 2px 8px;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
 }
 
 .seller-pill {
diff --git a/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss b/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss
index 9ee4b2e..3f51474 100644
--- a/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss
+++ b/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss
@@ -13,7 +13,7 @@
 }
 
 .average {
-  font-size: 1.75rem;
+  font-size: var(--font-size-4xl, 2rem);
   color: var(--text-primary);
 }
 
diff --git a/src/app/features/website/product/engagement/components/review-card/review-card.component.scss b/src/app/features/website/product/engagement/components/review-card/review-card.component.scss
index 97f2cd9..8c94393 100644
--- a/src/app/features/website/product/engagement/components/review-card/review-card.component.scss
+++ b/src/app/features/website/product/engagement/components/review-card/review-card.component.scss
@@ -10,7 +10,7 @@
   align-items: center;
   gap: 10px;
   color: var(--text-secondary);
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 .author {
@@ -21,13 +21,13 @@
   border: 1px dashed var(--border-dark);
   border-radius: 999px;
   padding: 3px 8px;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-secondary);
 }
 
 h4 {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: var(--text-primary);
 }
 
diff --git a/src/app/features/website/product/engagement/components/review-form/review-form.component.scss b/src/app/features/website/product/engagement/components/review-form/review-form.component.scss
index 4809012..b1d1e4f 100644
--- a/src/app/features/website/product/engagement/components/review-form/review-form.component.scss
+++ b/src/app/features/website/product/engagement/components/review-form/review-form.component.scss
@@ -12,7 +12,7 @@ h3 {
 label {
   font-weight: 700;
   color: var(--text-primary);
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 input,
@@ -38,13 +38,13 @@ textarea {
 .upload-placeholder {
   margin: 0;
   color: var(--text-light);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .success,
 .error {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .success {
diff --git a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
index 22478ef..b821e8c 100644
--- a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
+++ b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
@@ -8,7 +8,7 @@
   border: 0;
   background: transparent;
   color: #cad3d2;
-  font-size: 1.4rem;
+  font-size: var(--font-size-3xl, 1.5rem);
   line-height: 1;
   cursor: pointer;
   padding: 0;
diff --git a/src/app/features/website/product/engagement/components/stars/stars.component.scss b/src/app/features/website/product/engagement/components/stars/stars.component.scss
index 9cd85d3..1bdf602 100644
--- a/src/app/features/website/product/engagement/components/stars/stars.component.scss
+++ b/src/app/features/website/product/engagement/components/stars/stars.component.scss
@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   line-height: 1;
 }
 
diff --git a/src/app/features/website/user-experience/compare/components/compare-table.component.scss b/src/app/features/website/user-experience/compare/components/compare-table.component.scss
index 606f12e..b95101b 100644
--- a/src/app/features/website/user-experience/compare/components/compare-table.component.scss
+++ b/src/app/features/website/user-experience/compare/components/compare-table.component.scss
@@ -25,7 +25,7 @@
 }
 
 .compare-product-title {
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   font-weight: 700;
   line-height: 1.3;
 }
@@ -38,6 +38,6 @@
   .compare-table th,
   .compare-table td {
     padding: 10px;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 }
diff --git a/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss b/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss
index 61e4bf1..4cf12db 100644
--- a/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss
+++ b/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss
@@ -32,7 +32,7 @@
   border: 0;
   background: transparent;
   color: var(--text-secondary);
-  font-size: 1.15rem;
+  font-size: var(--font-size-xl, 1.125rem);
   line-height: 1;
   cursor: pointer;
 }
diff --git a/src/app/features/website/user-experience/components/recently-viewed-strip/recently-viewed-strip.component.scss b/src/app/features/website/user-experience/components/recently-viewed-strip/recently-viewed-strip.component.scss
index 3633020..8051846 100644
--- a/src/app/features/website/user-experience/components/recently-viewed-strip/recently-viewed-strip.component.scss
+++ b/src/app/features/website/user-experience/components/recently-viewed-strip/recently-viewed-strip.component.scss
@@ -14,7 +14,7 @@
 
 .recently-viewed-head h2 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: var(--font-size-2xl, 1.25rem);
   color: var(--text-primary);
 }
 
diff --git a/src/app/pages/cart/cart.component.scss b/src/app/pages/cart/cart.component.scss
index 72a8ab4..232d2ae 100644
--- a/src/app/pages/cart/cart.component.scss
+++ b/src/app/pages/cart/cart.component.scss
@@ -24,7 +24,7 @@
 
   h1 {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 2rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 700;
     color: #1e3c38;
     margin: 0;
@@ -37,7 +37,7 @@
     border: 1px solid #d3dad9;
     border-radius: 13px;
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
@@ -71,7 +71,7 @@
   align-items: center;
 
   h1 {
-    font-size: 2rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 700;
     color: #111827;
     margin: 0;
@@ -87,7 +87,7 @@
     color: white;
     border: none;
     border-radius: 12px;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -145,7 +145,7 @@
 
   p {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: #697777;
     margin: 0 0 28px 0;
   }
@@ -158,7 +158,7 @@
     border-radius: 13px;
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     font-weight: 600;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     transition: all 0.2s;
     box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
 
@@ -193,14 +193,14 @@
   }
 
   h2 {
-    font-size: 1.75rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 700;
     color: #111827;
     margin: 0 0 12px 0;
   }
 
   p {
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: #6b7280;
     margin: 0 0 32px 0;
   }
@@ -212,7 +212,7 @@
     text-decoration: none;
     border-radius: 12px;
     font-weight: 600;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     transition: all 0.3s;
     box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
 
@@ -331,7 +331,7 @@
 
   .item-name {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 1.05rem;
+    font-size: var(--font-size-lg, 1rem);
     font-weight: 600;
     color: #1e3c38;
     text-decoration: none;
@@ -360,7 +360,7 @@
 
   .item-description {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 0.875rem;
+    font-size: var(--font-size-base, 0.875rem);
     color: #697777;
     line-height: 1.5;
   }
@@ -373,7 +373,7 @@
     margin-top: 4px;
 
     .cart-variant {
-      font-size: 0.8rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       color: #497671;
       background: rgba(73, 118, 113, 0.08);
       padding: 3px 10px;
@@ -460,7 +460,7 @@
   }
 
   .item-name {
-    font-size: 1.125rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 700;
     color: #111827;
     text-decoration: none;
@@ -489,7 +489,7 @@
   }
 
   .item-description {
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     color: #6b7280;
     line-height: 1.6;
   }
@@ -502,7 +502,7 @@
     margin-top: 4px;
 
     .cart-variant {
-      font-size: 0.8rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       color: #6366f1;
       background: rgba(99, 102, 241, 0.08);
       padding: 3px 10px;
@@ -544,20 +544,20 @@
   }
 
   .original-price {
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     color: #9ca3af;
     text-decoration: line-through;
   }
 
   .current-price {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 1.15rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 700;
     color: #497671;
   }
 
   .delivery-price {
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     font-weight: 500;
     color: #697777;
   }
@@ -599,7 +599,7 @@
 
   .qty-value {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     font-weight: 700;
     color: #1e3c38;
     min-width: 24px;
@@ -645,7 +645,7 @@
   }
 
   .qty-value {
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     font-weight: 700;
     color: #059669;
     min-width: 24px;
@@ -691,7 +691,7 @@
 
   .summary-header h3 {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 1.4rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     font-weight: 700;
     color: #1e3c38;
     margin: 0 0 16px 0;
@@ -702,7 +702,7 @@
     justify-content: space-between;
     align-items: center;
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     color: #697777;
 
     &.delivery {
@@ -712,13 +712,13 @@
     &.total {
       padding-top: 16px;
       border-top: 1px solid #d3dad9;
-      font-size: 1.15rem;
+      font-size: var(--font-size-xl, 1.125rem);
       font-weight: 700;
       color: #1e3c38;
       margin-top: 8px;
 
       .total-price {
-        font-size: 1.35rem;
+        font-size: var(--font-size-3xl, 1.5rem);
         color: #497671;
       }
     }
@@ -739,7 +739,7 @@
     border: none;
     border-radius: 13px;
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 1.05rem;
+    font-size: var(--font-size-lg, 1rem);
     font-weight: 700;
     cursor: pointer;
     transition: all 0.2s;
@@ -783,14 +783,14 @@
 
     .login-gate-title {
       margin: 0 0 4px;
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
       font-weight: 700;
       color: #1a1a1a;
     }
 
     .login-gate-desc {
       margin: 0 0 16px;
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       color: #6b7280;
       line-height: 1.4;
     }
@@ -804,7 +804,7 @@
       border-radius: 10px;
       background: #2AABEE;
       color: #fff;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       font-weight: 600;
       cursor: pointer;
       transition: all 0.2s;
@@ -841,7 +841,7 @@
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
 
   .summary-header h3 {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     font-weight: 700;
     color: #111827;
     margin: 0 0 20px 0;
@@ -855,7 +855,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: #6b7280;
 
     &.delivery {
@@ -865,13 +865,13 @@
     &.total {
       padding-top: 20px;
       border-top: 2px solid #f0fdf4;
-      font-size: 1.2rem;
+      font-size: var(--font-size-2xl, 1.25rem);
       font-weight: 700;
       color: #111827;
       margin-top: 12px;
 
       .total-price {
-        font-size: 1.5rem;
+        font-size: var(--font-size-3xl, 1.5rem);
         color: #10b981;
         font-weight: 800;
       }
@@ -897,7 +897,7 @@
     color: white;
     border: none;
     border-radius: 14px;
-    font-size: 1.1rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -949,14 +949,14 @@
 
     .login-gate-title {
       margin: 0 0 4px;
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
       font-weight: 700;
       color: #111827;
     }
 
     .login-gate-desc {
       margin: 0 0 16px;
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       color: #6b7280;
       line-height: 1.4;
     }
@@ -970,7 +970,7 @@
       border-radius: 12px;
       background: #2AABEE;
       color: #fff;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1030,7 +1030,7 @@
     }
 
     .terms-text {
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       color: #6b7280;
       line-height: 1.4;
 
@@ -1050,7 +1050,7 @@
   margin: -4px 0 0;
   padding: 10px 12px;
   border-radius: 10px;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   line-height: 1.5;
 }
 
@@ -1085,7 +1085,7 @@
 
   .terms-text {
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     color: #697777;
     line-height: 1.5;
 
@@ -1119,7 +1119,7 @@
   }
 
   .terms-text {
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     line-height: 1.6;
 
     a {
@@ -1229,7 +1229,7 @@
   text-align: center;
 
   h2 {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     margin: 20px 0 10px;
     color: #1a1a1a;
   }
@@ -1280,7 +1280,7 @@
       border: none;
       border-radius: 13px;
       font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
       font-weight: 700;
       cursor: pointer;
       transition: all 0.2s;
@@ -1300,7 +1300,7 @@
     }
 
     .auto-close {
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       margin-top: 20px;
     }
   }
@@ -1394,11 +1394,11 @@
 
     .label {
       color: #6b7280;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
     }
 
     .amount {
-      font-size: 1.25rem;
+      font-size: var(--font-size-2xl, 1.25rem);
       font-weight: 700;
       color: #1a1a1a;
     }
@@ -1431,7 +1431,7 @@
       padding: 12px 16px;
       border-radius: 8px;
       font-weight: 600;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       cursor: pointer;
       transition: all 0.3s ease;
       text-align: center;
@@ -1532,7 +1532,7 @@
 
   .error-message {
     color: #ef4444;
-    font-size: 0.875rem;
+    font-size: var(--font-size-base, 0.875rem);
     padding-left: 4px;
     animation: slideDown 0.2s ease;
   }
@@ -1553,7 +1553,7 @@
     padding: 14px;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     outline: none;
     transition: all 0.2s;
 
@@ -1590,7 +1590,7 @@
     border: none;
     border-radius: 13px;
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     font-weight: 700;
     cursor: pointer;
     display: flex;
@@ -1698,7 +1698,7 @@
   }
 
   .payment-active h2 {
-    font-size: 1.25rem;
+    font-size: var(--font-size-2xl, 1.25rem);
     margin-bottom: 16px;
   }
 }
@@ -1729,7 +1729,7 @@
   border-bottom: 2px solid var(--border-color);
 
   h1 {
-    font-size: 2rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 700;
     color: var(--text-primary);
     margin: 0;
@@ -1748,7 +1748,7 @@
     color: white;
     border: none;
     border-radius: var(--radius-lg);
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -1791,14 +1791,14 @@
   }
 
   h2 {
-    font-size: 1.75rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 0.75rem 0;
   }
 
   p {
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: var(--text-secondary);
     margin: 0 0 2rem 0;
     max-width: 400px;
@@ -1812,7 +1812,7 @@
     text-decoration: none;
     border-radius: var(--radius-lg);
     font-weight: 600;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     transition: all 0.3s ease;
 
     &:hover {
@@ -1886,7 +1886,7 @@
       gap: 1rem;
 
       .item-name {
-        font-size: 1.125rem;
+        font-size: var(--font-size-xl, 1.125rem);
         font-weight: 600;
         color: var(--text-primary);
         text-decoration: none;
@@ -1926,7 +1926,7 @@
     }
 
     .item-desc {
-      font-size: 0.875rem;
+      font-size: var(--font-size-base, 0.875rem);
       color: var(--text-secondary);
       margin: 0;
       line-height: 1.5;
@@ -1946,7 +1946,7 @@
 
       .item-price {
         font-weight: 700;
-        font-size: 1.25rem;
+        font-size: var(--font-size-2xl, 1.25rem);
 
         .price-discount {
           display: flex;
@@ -1954,7 +1954,7 @@
           gap: 0.5rem;
 
           .old {
-            font-size: 0.95rem;
+            font-size: var(--font-size-md, 0.9375rem);
             color: var(--text-secondary);
             text-decoration: line-through;
             font-weight: 400;
@@ -1962,7 +1962,7 @@
 
           .current {
             color: #10b981;
-            font-size: 1.25rem;
+            font-size: var(--font-size-2xl, 1.25rem);
           }
         }
 
@@ -2013,7 +2013,7 @@
           min-width: 36px;
           text-align: center;
           font-weight: 600;
-          font-size: 1rem;
+          font-size: var(--font-size-lg, 1rem);
           color: var(--text-primary);
         }
       }
@@ -2033,7 +2033,7 @@
   padding: 1.5rem;
 
   h3 {
-    font-size: 1.25rem;
+    font-size: var(--font-size-2xl, 1.25rem);
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 1.25rem 0;
@@ -2046,7 +2046,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem 0;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     color: var(--text-secondary);
 
     .value {
@@ -2063,14 +2063,14 @@
     margin-top: 1rem;
     border-top: 1px solid var(--border-color);
     font-weight: 700;
-    font-size: 1.125rem;
+    font-size: var(--font-size-xl, 1.125rem);
 
     span:first-child {
       color: var(--text-secondary);
     }
 
     .total-price {
-      font-size: 1.5rem;
+      font-size: var(--font-size-3xl, 1.5rem);
       background: linear-gradient(135deg, #10b981, #14b8a6, #06b6d4);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -2117,7 +2117,7 @@
       gap: 0.75rem;
       cursor: pointer;
       position: relative;
-      font-size: 0.875rem;
+      font-size: var(--font-size-base, 0.875rem);
       line-height: 1.6;
 
       input[type="checkbox"] {
@@ -2204,7 +2204,7 @@
     gap: 1rem;
 
     h1 {
-      font-size: 1.5rem;
+      font-size: var(--font-size-3xl, 1.5rem);
     }
   }
 
@@ -2234,7 +2234,7 @@
     padding: 1.25rem;
 
     .summary-total .total-price {
-      font-size: 1.25rem;
+      font-size: var(--font-size-2xl, 1.25rem);
     }
   }
 }
diff --git a/src/app/pages/category/category.component.scss b/src/app/pages/category/category.component.scss
index 2297e7e..e7db29c 100644
--- a/src/app/pages/category/category.component.scss
+++ b/src/app/pages/category/category.component.scss
@@ -39,14 +39,14 @@
   }
 
   h3 {
-    font-size: 1.25rem;
+    font-size: var(--font-size-2xl, 1.25rem);
     font-weight: 700;
     color: #1e3c38;
     margin: 0 0 8px 0;
   }
 
   p {
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     color: #697777;
     margin: 0 0 24px 0;
     max-width: 340px;
@@ -61,7 +61,7 @@
     color: white;
     border-radius: 13px;
     font-family: "DM Sans", sans-serif;
-    font-size: 0.9375rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 600;
     text-decoration: none;
     transition: background 0.2s ease, transform 0.15s ease;
@@ -81,7 +81,7 @@
   border: none;
   border-radius: 8px;
   cursor: pointer;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-weight: 500;
   transition: all 0.2s ease;
@@ -166,7 +166,7 @@
   padding: 6px 12px;
   border-radius: 20px;
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   z-index: 1;
 }
@@ -206,7 +206,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: #697777;
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
@@ -227,7 +227,7 @@
 .original-price {
   text-decoration: line-through;
   color: #697777;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
@@ -274,7 +274,7 @@
   color: white;
   border: none;
   border-radius: 0 0 13px 13px;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   font-weight: 600;
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   cursor: pointer;
@@ -418,6 +418,6 @@
 
   .add-to-cart-btn {
     padding: 10px;
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
   }
 }
diff --git a/src/app/pages/category/subcategories.component.scss b/src/app/pages/category/subcategories.component.scss
index 0e05632..d407223 100644
--- a/src/app/pages/category/subcategories.component.scss
+++ b/src/app/pages/category/subcategories.component.scss
@@ -23,7 +23,7 @@
 
     p {
       color: #697777;
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
       font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       margin: 0;
     }
@@ -41,7 +41,7 @@
 
     p {
       color: #dc2626;
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
       font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       text-align: center;
       margin: 0;
@@ -53,7 +53,7 @@
       color: white;
       border: none;
       border-radius: 8px;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       font-weight: 500;
       font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       cursor: pointer;
@@ -93,14 +93,14 @@
     }
 
     h3 {
-      font-size: 1.25rem;
+      font-size: var(--font-size-2xl, 1.25rem);
       font-weight: 700;
       color: #1e3c38;
       margin: 0 0 8px 0;
     }
 
     p {
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       color: #697777;
       margin: 0 0 24px 0;
       max-width: 340px;
@@ -115,7 +115,7 @@
       color: white;
       border-radius: 13px;
       font-family: "DM Sans", sans-serif;
-      font-size: 0.9375rem;
+      font-size: var(--font-size-md, 0.9375rem);
       font-weight: 600;
       text-decoration: none;
       transition: background 0.2s ease, transform 0.15s ease;
@@ -132,7 +132,7 @@
 
     h2 {
       font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-size: 2rem;
+      font-size: var(--font-size-4xl, 2rem);
       color: #1e3c38;
       margin: 0;
       font-weight: 700;
@@ -237,7 +237,7 @@
 
   .category-count {
     font-family: "DM Sans", sans-serif;
-    font-size: 0.8rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     color: #697777;
   }
 
@@ -247,7 +247,7 @@
     gap: 6px;
     min-height: 20px;
     font-family: "DM Sans", sans-serif;
-    font-size: 0.8rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     color: #697777;
 
     span {
@@ -266,7 +266,7 @@
     background: #eef1f1;
     color: #697777;
     font-family: "DM Sans", sans-serif;
-    font-size: 0.75rem;
+    font-size: var(--font-size-xs, 0.75rem);
   }
 
   // Items section within subcategories page
@@ -275,7 +275,7 @@
 
     .items-section-title {
       font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      font-size: 1.5rem;
+      font-size: var(--font-size-3xl, 1.5rem);
       font-weight: 700;
       color: #1e3c38;
       margin: 0 0 20px 0;
@@ -327,7 +327,7 @@
       right: 8px;
       background: #dc2626;
       color: white;
-      font-size: 0.75rem;
+      font-size: var(--font-size-xs, 0.75rem);
       font-weight: 700;
       padding: 2px 8px;
       border-radius: 6px;
@@ -360,7 +360,7 @@
 
   .item-name {
     font-family: "DM Sans", sans-serif;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     font-weight: 600;
     color: #1e3c38;
     margin: 0;
@@ -379,13 +379,13 @@
     flex-wrap: wrap;
 
     .old-price {
-      font-size: 0.8rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       color: #a1b4b5;
       text-decoration: line-through;
     }
 
     .current-price {
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
       font-weight: 700;
       color: #1e3c38;
     }
@@ -440,7 +440,7 @@
       margin-bottom: 20px;
 
       h2 {
-        font-size: 1.5rem;
+        font-size: var(--font-size-3xl, 1.5rem);
       }
     }
 
@@ -466,7 +466,7 @@
       margin-bottom: 16px;
 
       h2 {
-        font-size: 1.35rem;
+        font-size: var(--font-size-3xl, 1.5rem);
       }
     }
 
diff --git a/src/app/pages/info/contacts/contacts.component.scss b/src/app/pages/info/contacts/contacts.component.scss
index acb266a..b577608 100644
--- a/src/app/pages/info/contacts/contacts.component.scss
+++ b/src/app/pages/info/contacts/contacts.component.scss
@@ -17,7 +17,7 @@
   }
   
   .icon {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     color: var(--primary-color);
   }
   
@@ -28,7 +28,7 @@
       display: block;
       margin-bottom: 0.25rem;
       color: var(--text-secondary);
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
     }
     
     a {
diff --git a/src/app/pages/info/faq/faq.component.scss b/src/app/pages/info/faq/faq.component.scss
index cdb4072..bb650cc 100644
--- a/src/app/pages/info/faq/faq.component.scss
+++ b/src/app/pages/info/faq/faq.component.scss
@@ -17,7 +17,7 @@
   h3 {
     color: var(--primary-color);
     margin-top: 0;
-    font-size: 1.2rem;
+    font-size: var(--font-size-2xl, 1.25rem);
     margin-bottom: 0.75rem;
   }
   
diff --git a/src/app/pages/item-detail/item-detail.component.scss b/src/app/pages/item-detail/item-detail.component.scss
index e3038b6..1da15e4 100644
--- a/src/app/pages/item-detail/item-detail.component.scss
+++ b/src/app/pages/item-detail/item-detail.component.scss
@@ -23,7 +23,7 @@ $dx-card-bg: #f5f3f9;
   padding: 80px 20px;
   color: $dx-muted;
 
-  p { margin: 0; font-size: 1rem; }
+  p { margin: 0; font-size: var(--font-size-lg, 1rem); }
 }
 
 .dx-spinner {
@@ -71,7 +71,7 @@ $dx-card-bg: #f5f3f9;
   h2 {
     margin: 0 0 20px;
     color: $dx-dark;
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     font-weight: 800;
   }
 }
@@ -174,7 +174,7 @@ $dx-card-bg: #f5f3f9;
   align-items: center;
   gap: 12px;
   color: $dx-secondary;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 // Item Info Panel
@@ -186,7 +186,7 @@ $dx-card-bg: #f5f3f9;
 
 .dx-title {
   font-family: $dx-font;
-  font-size: 1.75rem;
+  font-size: var(--font-size-4xl, 2rem);
   font-weight: 700;
   color: $dx-dark;
   margin: 0;
@@ -210,12 +210,12 @@ $dx-card-bg: #f5f3f9;
 
 .dx-rating-value {
   font-weight: 700;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   color: $dx-dark;
 }
 
 .dx-rating-count {
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   color: $dx-muted;
 }
 
@@ -234,7 +234,7 @@ $dx-card-bg: #f5f3f9;
 .dx-old-price {
   text-decoration: line-through;
   color: $dx-muted;
-  font-size: 1.1rem;
+  font-size: var(--font-size-xl, 1.125rem);
 }
 
 .dx-discount-tag {
@@ -243,7 +243,7 @@ $dx-card-bg: #f5f3f9;
   padding: 3px 10px;
   border-radius: 20px;
   font-weight: 700;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .dx-current-price {
@@ -261,7 +261,7 @@ $dx-card-bg: #f5f3f9;
 }
 
 .dx-stock-label {
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   color: $dx-muted;
 }
 
@@ -269,7 +269,7 @@ $dx-card-bg: #f5f3f9;
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   font-weight: 600;
 
   &.high { color: #2ed573; }
@@ -293,7 +293,7 @@ $dx-card-bg: #f5f3f9;
   border: none;
   border-radius: 13px;
   font-family: $dx-font;
-  font-size: 1.1rem;
+  font-size: var(--font-size-xl, 1.125rem);
   font-weight: 700;
   cursor: pointer;
   transition: all 0.2s;
@@ -329,7 +329,7 @@ $dx-card-bg: #f5f3f9;
   }
 
   .variant-label {
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     color: #6b7280;
     font-weight: 500;
   }
@@ -339,7 +339,7 @@ $dx-card-bg: #f5f3f9;
     align-items: center;
     padding: 6px 14px;
     border-radius: 8px;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     font-weight: 600;
     border: 1.5px solid $dx-border;
     background: rgba(73, 118, 113, 0.06);
@@ -390,7 +390,7 @@ $dx-card-bg: #f5f3f9;
   .attribute-row {
     display: flex;
     gap: 6px;
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
   }
 
   .attribute-key {
@@ -416,7 +416,7 @@ $dx-card-bg: #f5f3f9;
 
 .dx-delivery-title, .alt-delivery-title {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 700;
   color: $dx-dark;
 }
@@ -442,14 +442,14 @@ $dx-card-bg: #f5f3f9;
   flex-direction: column;
   gap: 4px;
   color: $dx-muted;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 .dx-delivery-price, .alt-delivery-price {
   flex-shrink: 0;
   font-weight: 700;
   color: $dx-primary;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 .dx-delivery-chip, .alt-delivery-chip {
@@ -459,7 +459,7 @@ $dx-card-bg: #f5f3f9;
   border-radius: 999px;
   background: rgba(73, 118, 113, 0.12);
   color: $dx-primary;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   font-weight: 700;
 }
 
@@ -469,7 +469,7 @@ $dx-card-bg: #f5f3f9;
 
   h2 {
     font-family: $dx-font;
-    font-size: 1.3rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     font-weight: 700;
     color: $dx-dark;
     margin: 0 0 12px 0;
@@ -477,7 +477,7 @@ $dx-card-bg: #f5f3f9;
 }
 
 .dx-description-text {
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   color: $dx-muted;
   line-height: 1.7;
 }
@@ -488,7 +488,7 @@ $dx-card-bg: #f5f3f9;
 
   h2 {
     font-family: $dx-font;
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     font-weight: 700;
     color: $dx-dark;
     margin: 0 0 24px 0;
@@ -506,7 +506,7 @@ $dx-card-bg: #f5f3f9;
     font-family: $dx-font;
     margin: 0 0 20px 0;
     color: $dx-dark;
-    font-size: 1.15rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 700;
   }
 }
@@ -519,7 +519,7 @@ $dx-card-bg: #f5f3f9;
     margin-bottom: 8px;
     color: $dx-dark;
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
   }
 }
 
@@ -545,7 +545,7 @@ $dx-card-bg: #f5f3f9;
   border: 1px solid $dx-border;
   border-radius: 10px;
   font-family: $dx-font;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   resize: none;
   margin-bottom: 16px;
   background: white;
@@ -570,7 +570,7 @@ $dx-card-bg: #f5f3f9;
   align-items: center;
   gap: 8px;
   cursor: pointer;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   color: $dx-muted;
 
   input[type="checkbox"] {
@@ -583,7 +583,7 @@ $dx-card-bg: #f5f3f9;
 
 .dx-user-preview {
   color: $dx-primary;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   font-style: italic;
 }
 
@@ -596,7 +596,7 @@ $dx-card-bg: #f5f3f9;
   border-radius: 13px;
   font-family: $dx-font;
   font-weight: 700;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   cursor: pointer;
   transition: all 0.2s;
   display: inline-flex;
@@ -638,7 +638,7 @@ $dx-card-bg: #f5f3f9;
   align-items: center;
   gap: 10px;
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   animation: dxSlideIn 0.3s ease-out;
 
   &.success {
@@ -694,12 +694,12 @@ $dx-card-bg: #f5f3f9;
 .dx-reviewer-name {
   font-weight: 600;
   color: $dx-dark;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 .dx-review-date {
   color: $dx-muted;
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .dx-review-stars {
@@ -711,14 +711,14 @@ $dx-card-bg: #f5f3f9;
   color: $dx-muted;
   line-height: 1.6;
   margin: 0;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 .dx-no-reviews {
   text-align: center;
   color: $dx-muted;
   padding: 40px;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 // Q&A Section
@@ -727,7 +727,7 @@ $dx-card-bg: #f5f3f9;
 
   h2 {
     font-family: $dx-font;
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
     font-weight: 700;
     color: $dx-dark;
     margin: 0 0 24px 0;
@@ -754,7 +754,7 @@ $dx-card-bg: #f5f3f9;
   margin-bottom: 12px;
   line-height: 1.6;
   color: $dx-muted;
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 .dx-qa-label {
@@ -766,7 +766,7 @@ $dx-card-bg: #f5f3f9;
   align-items: center;
   justify-content: center;
   font-weight: 700;
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 
   &.q {
     background: $dx-primary;
@@ -795,7 +795,7 @@ $dx-card-bg: #f5f3f9;
   border: 1px solid $dx-border;
   border-radius: 8px;
   padding: 6px 12px;
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: $dx-muted;
   cursor: pointer;
   transition: all 0.2s;
@@ -830,7 +830,7 @@ $dx-card-bg: #f5f3f9;
   }
 
   .dx-title {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 }
 
@@ -858,7 +858,7 @@ $dx-card-bg: #f5f3f9;
   .dx-reviews-section,
   .dx-qa-section {
     h2 {
-      font-size: 1.3rem;
+      font-size: var(--font-size-3xl, 1.5rem);
     }
   }
 }
@@ -905,7 +905,7 @@ $dx-card-bg: #f5f3f9;
   }
 
   .dx-title {
-    font-size: 1.4rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 
   .dx-current-price {
@@ -913,18 +913,18 @@ $dx-card-bg: #f5f3f9;
   }
 
   .dx-old-price {
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
   }
 
   .dx-add-cart {
     max-width: 100%;
     padding: 14px 20px;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
   }
 
   .dx-description {
     h2 {
-      font-size: 1.15rem;
+      font-size: var(--font-size-xl, 1.125rem);
     }
   }
 
@@ -936,7 +936,7 @@ $dx-card-bg: #f5f3f9;
 
     td {
       padding: 8px 10px;
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
     }
   }
 
@@ -963,7 +963,7 @@ $dx-card-bg: #f5f3f9;
     margin-bottom: 32px;
 
     h2 {
-      font-size: 1.25rem;
+      font-size: var(--font-size-2xl, 1.25rem);
       margin-bottom: 16px;
     }
   }
@@ -974,7 +974,7 @@ $dx-card-bg: #f5f3f9;
 
   .dx-question,
   .dx-answer {
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 }
 
@@ -1005,7 +1005,7 @@ $dx-card-bg: #f5f3f9;
   }
 
   .dx-title {
-    font-size: 1.2rem;
+    font-size: var(--font-size-2xl, 1.25rem);
   }
 
   .dx-info {
@@ -1013,7 +1013,7 @@ $dx-card-bg: #f5f3f9;
   }
 
   .dx-current-price {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 
   .dx-rating {
@@ -1028,7 +1028,7 @@ $dx-card-bg: #f5f3f9;
 
   .dx-add-cart {
     padding: 12px 16px;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     border-radius: 10px;
   }
 
@@ -1036,19 +1036,19 @@ $dx-card-bg: #f5f3f9;
     padding: 14px;
 
     h3 {
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
     }
   }
 
   .dx-star-selector {
     .dx-star-pick {
-      font-size: 1.5rem;
+      font-size: var(--font-size-3xl, 1.5rem);
     }
   }
 
   .dx-textarea {
     padding: 12px;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 
   .dx-review-card {
@@ -1056,17 +1056,17 @@ $dx-card-bg: #f5f3f9;
   }
 
   .dx-reviewer-name {
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 
   .dx-review-text {
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
   }
 
   .dx-specs-table {
     td {
       padding: 6px 8px;
-      font-size: 0.8rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       display: block;
     }
 
@@ -1092,14 +1092,14 @@ $dx-card-bg: #f5f3f9;
 
   .dx-question,
   .dx-answer {
-    font-size: 0.85rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     gap: 8px;
   }
 
   .dx-qa-label {
     width: 24px;
     height: 24px;
-    font-size: 0.7rem;
+    font-size: var(--font-size-xs, 0.75rem);
   }
 }
 
@@ -1182,7 +1182,7 @@ $dx-card-bg: #f5f3f9;
       }
 
       p {
-        font-size: 0.9rem;
+        font-size: var(--font-size-base, 0.875rem);
       }
     }
   }
@@ -1241,7 +1241,7 @@ $dx-card-bg: #f5f3f9;
 
 .alt-info {
   .alt-title {
-    font-size: 2rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 1rem 0;
@@ -1256,7 +1256,7 @@ $dx-card-bg: #f5f3f9;
 
     .stars {
       color: #fbbf24;
-      font-size: 1.1rem;
+      font-size: var(--font-size-xl, 1.125rem);
     }
 
     .value {
@@ -1266,7 +1266,7 @@ $dx-card-bg: #f5f3f9;
 
     .reviews {
       color: var(--text-secondary);
-      font-size: 0.9rem;
+      font-size: var(--font-size-base, 0.875rem);
     }
   }
 
@@ -1286,7 +1286,7 @@ $dx-card-bg: #f5f3f9;
     .old-price {
       text-decoration: line-through;
       color: var(--text-tertiary);
-      font-size: 1.1rem;
+      font-size: var(--font-size-xl, 1.125rem);
     }
 
     .discount-badge {
@@ -1295,7 +1295,7 @@ $dx-card-bg: #f5f3f9;
       padding: 0.25rem 0.75rem;
       border-radius: var(--radius-md);
       font-weight: 700;
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
     }
 
     .current-price {
@@ -1358,7 +1358,7 @@ $dx-card-bg: #f5f3f9;
     color: white;
     border: none;
     border-radius: var(--radius-lg);
-    font-size: 1.1rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-weight: 700;
     cursor: pointer;
     display: flex;
@@ -1381,7 +1381,7 @@ $dx-card-bg: #f5f3f9;
 
   .alt-description {
     h3 {
-      font-size: 1.25rem;
+      font-size: var(--font-size-2xl, 1.25rem);
       font-weight: 600;
       color: var(--text-primary);
       margin: 0 0 1rem 0;
@@ -1402,7 +1402,7 @@ $dx-card-bg: #f5f3f9;
   border-top: 1px solid var(--border-color);
 
   h2 {
-    font-size: 1.75rem;
+    font-size: var(--font-size-4xl, 2rem);
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 2rem 0;
@@ -1440,19 +1440,19 @@ $dx-card-bg: #f5f3f9;
 
         .reviewer-name {
           font-weight: 600;
-          font-size: 1rem;
+          font-size: var(--font-size-lg, 1rem);
           color: var(--text-primary);
         }
 
         .review-date {
-          font-size: 0.8rem;
+          font-size: var(--font-size-sm, 0.8125rem);
           color: var(--text-secondary);
         }
       }
 
       .review-stars {
         color: #fbbf24;
-        font-size: 1.125rem;
+        font-size: var(--font-size-xl, 1.125rem);
         flex-shrink: 0;
       }
     }
@@ -1461,7 +1461,7 @@ $dx-card-bg: #f5f3f9;
       color: var(--text-secondary);
       line-height: 1.7;
       margin: 0;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
     }
   }
 
@@ -1469,7 +1469,7 @@ $dx-card-bg: #f5f3f9;
     text-align: center;
     padding: 3rem 2rem;
     color: var(--text-secondary);
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     background: var(--bg-secondary);
     border-radius: var(--radius-lg);
   }
@@ -1484,7 +1484,7 @@ $dx-card-bg: #f5f3f9;
   margin-bottom: 2rem;
 
   h3 {
-    font-size: 1.25rem;
+    font-size: var(--font-size-2xl, 1.25rem);
     font-weight: 700;
     color: var(--text-primary);
     margin: 0 0 1.5rem 0;
@@ -1495,7 +1495,7 @@ $dx-card-bg: #f5f3f9;
 
     label {
       display: block;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       font-weight: 600;
       color: var(--text-primary);
       margin-bottom: 0.75rem;
@@ -1506,7 +1506,7 @@ $dx-card-bg: #f5f3f9;
       gap: 0.5rem;
 
       .alt-star {
-        font-size: 2rem;
+        font-size: var(--font-size-4xl, 2rem);
         color: #d1d5db;
         cursor: pointer;
         transition: all 0.2s ease;
@@ -1529,7 +1529,7 @@ $dx-card-bg: #f5f3f9;
     padding: 1rem;
     border: 1px solid var(--border-color);
     border-radius: var(--radius-md);
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-family: inherit;
     color: var(--text-primary);
     background: white;
@@ -1560,7 +1560,7 @@ $dx-card-bg: #f5f3f9;
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      font-size: 0.9rem;
+      font-size: var(--font-size-base, 0.875rem);
       color: var(--text-secondary);
       cursor: pointer;
 
@@ -1576,7 +1576,7 @@ $dx-card-bg: #f5f3f9;
     }
 
     .alt-username-preview {
-      font-size: 0.875rem;
+      font-size: var(--font-size-base, 0.875rem);
       color: var(--text-secondary);
       font-style: italic;
     }
@@ -1591,7 +1591,7 @@ $dx-card-bg: #f5f3f9;
       color: white;
       border: none;
       border-radius: var(--radius-md);
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
@@ -1634,7 +1634,7 @@ $dx-card-bg: #f5f3f9;
     padding: 1rem;
     margin-top: 1rem;
     border-radius: var(--radius-md);
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
     font-weight: 500;
     animation: slideDown 0.3s ease;
 
@@ -1692,11 +1692,11 @@ $dx-card-bg: #f5f3f9;
   }
 
   .alt-info .alt-title {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 
   .alt-info .alt-price-block .current-price {
-    font-size: 2rem;
+    font-size: var(--font-size-4xl, 2rem);
   }
 
   .alt-info .alt-add-cart {
@@ -1745,7 +1745,7 @@ $dx-card-bg: #f5f3f9;
 
   .alt-info {
     .alt-title {
-      font-size: 1.35rem;
+      font-size: var(--font-size-3xl, 1.5rem);
     }
 
     .alt-rating {
@@ -1758,11 +1758,11 @@ $dx-card-bg: #f5f3f9;
       padding: 1rem;
 
       .current-price {
-        font-size: 1.75rem;
+        font-size: var(--font-size-4xl, 2rem);
       }
 
       .old-price {
-        font-size: 0.95rem;
+        font-size: var(--font-size-md, 0.9375rem);
       }
     }
 
@@ -1774,13 +1774,13 @@ $dx-card-bg: #f5f3f9;
 
     .alt-add-cart {
       padding: 1rem 1.5rem;
-      font-size: 1rem;
+      font-size: var(--font-size-lg, 1rem);
       margin-bottom: 1.5rem;
     }
 
     .alt-description {
       h3 {
-        font-size: 1.1rem;
+        font-size: var(--font-size-xl, 1.125rem);
       }
     }
   }
@@ -1793,7 +1793,7 @@ $dx-card-bg: #f5f3f9;
 
     td {
       padding: 8px 10px;
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
     }
   }
 
@@ -1802,7 +1802,7 @@ $dx-card-bg: #f5f3f9;
     padding-top: 2rem;
 
     h2 {
-      font-size: 1.35rem;
+      font-size: var(--font-size-3xl, 1.5rem);
       margin-bottom: 1.5rem;
     }
   }
@@ -1815,7 +1815,7 @@ $dx-card-bg: #f5f3f9;
     padding: 1.25rem;
 
     h3 {
-      font-size: 1.1rem;
+      font-size: var(--font-size-xl, 1.125rem);
     }
   }
 }
@@ -1844,25 +1844,25 @@ $dx-card-bg: #f5f3f9;
 
   .alt-info {
     .alt-title {
-      font-size: 1.15rem;
+      font-size: var(--font-size-xl, 1.125rem);
     }
 
     .alt-price-block {
       padding: 0.75rem;
 
       .current-price {
-        font-size: 1.5rem;
+        font-size: var(--font-size-3xl, 1.5rem);
       }
     }
 
     .alt-stock {
       padding: 0.6rem;
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm, 0.8125rem);
     }
 
     .alt-add-cart {
       padding: 0.85rem 1rem;
-      font-size: 0.95rem;
+      font-size: var(--font-size-md, 0.9375rem);
       border-radius: var(--radius-md);
     }
   }
@@ -1880,7 +1880,7 @@ $dx-card-bg: #f5f3f9;
 
     .alt-textarea {
       padding: 0.75rem;
-      font-size: 0.9rem;
+      font-size: var(--font-size-base, 0.875rem);
     }
   }
 
@@ -1897,14 +1897,14 @@ $dx-card-bg: #f5f3f9;
     }
 
     .review-text {
-      font-size: 0.9rem;
+      font-size: var(--font-size-base, 0.875rem);
     }
   }
 
   .alt-specs-table {
     td {
       padding: 6px 8px;
-      font-size: 0.8rem;
+      font-size: var(--font-size-sm, 0.8125rem);
       display: block;
     }
 
@@ -1939,7 +1939,7 @@ $dx-card-bg: #f5f3f9;
   display: inline-block;
   padding: 3px 10px;
   border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -1967,7 +1967,7 @@ $dx-card-bg: #f5f3f9;
   display: inline-block;
   padding: 2px 8px;
   border-radius: 12px;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: #497671;
   background: rgba(73, 118, 113, 0.08);
   border: 1px solid rgba(73, 118, 113, 0.15);
@@ -1986,7 +1986,7 @@ $dx-card-bg: #f5f3f9;
 
   td {
     padding: 10px 12px;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base, 0.875rem);
     vertical-align: top;
   }
 
@@ -2004,7 +2004,7 @@ $dx-card-bg: #f5f3f9;
 
 // Simple description
 .alt-simple-desc, .dx-simple-desc {
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   color: #697777;
   line-height: 1.6;
   margin-bottom: 16px;
@@ -2012,7 +2012,7 @@ $dx-card-bg: #f5f3f9;
 
 // Stock quantity
 .stock-qty, .dx-stock-qty {
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: #697777;
   margin-left: 8px;
 }
diff --git a/src/app/pages/legal/company-details/company-details.component.scss b/src/app/pages/legal/company-details/company-details.component.scss
index 94aee60..f3c547b 100644
--- a/src/app/pages/legal/company-details/company-details.component.scss
+++ b/src/app/pages/legal/company-details/company-details.component.scss
@@ -51,12 +51,12 @@
 }
 
 .org-short {
-  font-size: 0.95rem;
+  font-size: var(--font-size-md, 0.9375rem);
   color: var(--text-light);
 }
 
 .basis {
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   color: var(--text-light);
   margin-top: 0.5rem;
 }
diff --git a/src/app/pages/search/search.component.scss b/src/app/pages/search/search.component.scss
index d9bb107..f4b20d3 100644
--- a/src/app/pages/search/search.component.scss
+++ b/src/app/pages/search/search.component.scss
@@ -9,7 +9,7 @@
   margin-bottom: 40px;
 
   h1 {
-    font-size: 2rem;
+    font-size: var(--font-size-4xl, 2rem);
     margin-bottom: 20px;
     color: #1e3c38;
     text-align: center;
@@ -24,7 +24,7 @@
   .search-input {
     width: 100%;
     padding: 16px 50px 16px 20px;
-    font-size: 1.1rem;
+    font-size: var(--font-size-xl, 1.125rem);
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     border: 2px solid #d3dad9;
     border-radius: 13px;
@@ -53,7 +53,7 @@
   text-align: center;
   margin-bottom: 24px;
   color: #1e3c38;
-  font-size: 1.1rem;
+  font-size: var(--font-size-xl, 1.125rem);
 }
 
 .empty-state,
@@ -82,7 +82,7 @@
   }
 
   p {
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     color: #a1b4b5;
     margin: 0;
   }
@@ -108,7 +108,7 @@
   }
 
   h2 {
-    font-size: 1.25rem;
+    font-size: var(--font-size-2xl, 1.25rem);
     font-weight: 700;
     color: #1e3c38;
     margin: 0 0 8px 0;
@@ -117,11 +117,11 @@
   p {
     margin: 4px 0;
     color: #697777;
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
   }
 
   .hint {
-    font-size: 0.875rem;
+    font-size: var(--font-size-base, 0.875rem);
     color: #a1b4b5;
     margin-top: 12px;
   }
@@ -139,7 +139,7 @@
     border: none;
     border-radius: 13px;
     cursor: pointer;
-    font-size: 1rem;
+    font-size: var(--font-size-lg, 1rem);
     font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
     &:hover {
@@ -220,7 +220,7 @@
   padding: 6px 12px;
   border-radius: 20px;
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 .item-details {
@@ -232,7 +232,7 @@
 }
 
 .item-name {
-  font-size: 1.1rem;
+  font-size: var(--font-size-xl, 1.125rem);
   margin: 0;
   color: #1e3c38;
   display: -webkit-box;
@@ -246,7 +246,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
   color: #1e3c38;
 
   .rating-stars {
@@ -266,12 +266,12 @@
 .original-price {
   text-decoration: line-through;
   color: #697777;
-  font-size: 0.9rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 .discounted-price,
 .current-price {
-  font-size: 1.3rem;
+  font-size: var(--font-size-3xl, 1.5rem);
   font-weight: 700;
   color: var(--primary-color);
 }
@@ -311,7 +311,7 @@
   color: white;
   border: none;
   border-radius: 0 0 13px 13px;
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
   font-weight: 600;
   font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   cursor: pointer;
@@ -407,7 +407,7 @@
 
 @media (max-width: 768px) {
   .search-header h1 {
-    font-size: 1.5rem;
+    font-size: var(--font-size-3xl, 1.5rem);
   }
 
   .items-grid {
@@ -416,11 +416,11 @@
   }
 
   .item-name {
-    font-size: 0.95rem;
+    font-size: var(--font-size-md, 0.9375rem);
   }
 
   .discounted-price,
   .current-price {
-    font-size: 1.1rem;
+    font-size: var(--font-size-xl, 1.125rem);
   }
 }
diff --git a/src/app/shared/media/media-picker/media-picker.component.scss b/src/app/shared/media/media-picker/media-picker.component.scss
index 39bfb32..39bc105 100644
--- a/src/app/shared/media/media-picker/media-picker.component.scss
+++ b/src/app/shared/media/media-picker/media-picker.component.scss
@@ -36,7 +36,7 @@
 
 .media-picker__error {
   color: var(--color-danger, #d9433c);
-  font-size: 0.85rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   margin: 0;
 }
 
@@ -47,7 +47,7 @@
 
 .media-picker__filename {
   display: block;
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs, 0.75rem);
   color: var(--text-primary, #1f322d);
   overflow: hidden;
   text-overflow: ellipsis;