diff --git a/src/styles.scss b/src/styles.scss
index 31fa29e..2721ad1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -42,7 +42,9 @@
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;
-  
+  --space-2xl: 48px;
+  --space-3xl: 64px;
+
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 13px;
@@ -51,6 +53,29 @@
   --transition-fast: 120ms ease;
   --transition-normal: 180ms ease;
   --transition-slow: 300ms ease;
+
+  /* Typography scale (RC design-system finalization).
+     Steps chosen to match the sizes already in wide use across the app
+     (button/input sm|md|lg = sm|md|lg here) so most components can adopt
+     the tokens by substitution rather than a visual redesign. */
+  --font-size-xs: 0.75rem;    /* 12px — captions, badges, meta/helper text */
+  --font-size-sm: 0.8125rem;  /* 13px — secondary text, table cells, sm controls */
+  --font-size-base: 0.875rem; /* 14px — dense body copy, form labels */
+  --font-size-md: 0.9375rem;  /* 15px — default body copy, md controls */
+  --font-size-lg: 1rem;       /* 16px — emphasized body, lg controls */
+  --font-size-xl: 1.125rem;   /* 18px — card/section titles */
+  --font-size-2xl: 1.25rem;   /* 20px — subsection headings */
+  --font-size-3xl: 1.5rem;    /* 24px — page/section headings */
+  --font-size-4xl: 2rem;      /* 32px — hero / display headings */
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
 }
 
 * {
@@ -73,7 +98,9 @@ html {
 
 body {
   font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  line-height: 1.6;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-relaxed);
   color: var(--text-primary);
   background: #f5f5f5;
   min-height: 100vh;
@@ -84,13 +111,52 @@ body {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 700;
-  line-height: 1.25;
+/* Heading scale — page title (h1) down to card/section title (h6). Individual
+   pages may still override size for hero/display treatments via the
+   --font-size-* tokens directly rather than arbitrary px/rem literals. */
+h1 {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+}
+
+h5 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+}
+
+h6 {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
 }
 
 p {
-  line-height: 1.5;
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-normal);
+}
+
+small {
+  font-size: var(--font-size-xs);
 }
 
 img,
@@ -258,12 +324,13 @@ details[open] > summary::after {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--space-sm);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
-  padding: 0.625rem 1rem;
-  font-weight: 600;
-  line-height: 1.2;
+  padding: 0.625rem var(--space-md);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
   cursor: pointer;
   text-decoration: none;
   transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
@@ -354,20 +421,20 @@ details[open] > summary::after {
   text-align: center;
 }
 
-.mt-1 { margin-top: 0.5rem; }
-.mt-2 { margin-top: 1rem; }
-.mt-3 { margin-top: 1.5rem; }
-.mt-4 { margin-top: 2rem; }
+.mt-1 { margin-top: var(--space-sm); }
+.mt-2 { margin-top: var(--space-md); }
+.mt-3 { margin-top: var(--space-lg); }
+.mt-4 { margin-top: var(--space-xl); }
 
-.mb-1 { margin-bottom: 0.5rem; }
-.mb-2 { margin-bottom: 1rem; }
-.mb-3 { margin-bottom: 1.5rem; }
-.mb-4 { margin-bottom: 2rem; }
+.mb-1 { margin-bottom: var(--space-sm); }
+.mb-2 { margin-bottom: var(--space-md); }
+.mb-3 { margin-bottom: var(--space-lg); }
+.mb-4 { margin-bottom: var(--space-xl); }
 
-.p-1 { padding: 0.5rem; }
-.p-2 { padding: 1rem; }
-.p-3 { padding: 1.5rem; }
-.p-4 { padding: 2rem; }
+.p-1 { padding: var(--space-sm); }
+.p-2 { padding: var(--space-md); }
+.p-3 { padding: var(--space-lg); }
+.p-4 { padding: var(--space-xl); }
 
 // ─── Shared Badge & Tag Styles (from backOffice integration) ───
 
@@ -383,14 +450,14 @@ details[open] > summary::after {
 
 .item-badge {
   display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 0.7rem;
-  font-weight: 600;
+  padding: 2px var(--space-xs);
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: 0.4px;
   color: #fff;
-  line-height: 1.4;
+  line-height: var(--line-height-normal);
 
   &.badge-new       { background: #4caf50; }
   &.badge-sale       { background: #f44336; }
@@ -404,18 +471,18 @@ details[open] > summary::after {
 
 .item-tag {
   display: inline-block;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.72rem;
+  padding: 2px var(--space-xs);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
   color: var(--primary-color);
   background: rgba(73, 118, 113, 0.08);
   border: 1px solid rgba(73, 118, 113, 0.15);
 }
 
 .item-simple-desc {
-  font-size: 0.8rem;
+  font-size: var(--font-size-sm);
   color: var(--text-secondary);
-  line-height: 1.4;
+  line-height: var(--line-height-normal);
   margin: 2px 0 4px;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/styles/themes/dexar.theme.scss b/src/styles/themes/dexar.theme.scss
index 4431871..893ef68 100644
--- a/src/styles/themes/dexar.theme.scss
+++ b/src/styles/themes/dexar.theme.scss
@@ -31,10 +31,12 @@
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
   --shadow-lg: 0 12px 32px rgba(73, 118, 113, 0.2);
   
+  --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 13px;
   --radius-xl: 22px;
+  --radius-full: 999px;
 }
 
 body {
diff --git a/src/styles/themes/lavero.theme.scss b/src/styles/themes/lavero.theme.scss
index 74fd537..83a970e 100644
--- a/src/styles/themes/lavero.theme.scss
+++ b/src/styles/themes/lavero.theme.scss
@@ -31,8 +31,10 @@
   --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 12px 40px rgba(253, 115, 0, 0.25);
   
+  --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
+  --radius-full: 999px;
 }
diff --git a/src/styles/themes/novo.theme.scss b/src/styles/themes/novo.theme.scss
index 9533bde..56bcd44 100644
--- a/src/styles/themes/novo.theme.scss
+++ b/src/styles/themes/novo.theme.scss
@@ -31,8 +31,10 @@
   --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 12px 40px rgba(16, 185, 129, 0.25);
   
+  --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
+  --radius-full: 999px;
 }