diff --git a/ui/atproto/explorer.css b/ui/atproto/explorer.css
index bf07a9a..2db4a86 100644
--- a/ui/atproto/explorer.css
+++ b/ui/atproto/explorer.css
@@ -20,7 +20,7 @@ header {
 }
 
 header h1 {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-2xl);
   margin-bottom: var(--spacing-sm);
   display: flex;
   align-items: center;
@@ -43,7 +43,7 @@ header h1 lucide-icon {
   border-radius: var(--radius-sm);
   background: var(--bg-webview);
   color: var(--color-text);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   font-family: inherit;
   outline: none;
   transition:
@@ -67,7 +67,7 @@ header h1 lucide-icon {
   background: var(--color-primary);
   color: var(--color-text-on-header);
   cursor: pointer;
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   font-family: inherit;
   font-weight: var(--font-weight-bold);
   transition:
@@ -81,7 +81,7 @@ header h1 lucide-icon {
 
 .breadcrumb {
   padding: var(--spacing-sm) var(--spacing-lg);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   border-bottom: 1px solid var(--color-border);
   background: var(--bg-menu);
@@ -137,12 +137,12 @@ main {
 }
 
 .repo-info h2 {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-xl);
   margin-bottom: var(--spacing-xs);
 }
 
 .repo-info .did {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   word-break: break-all;
 }
@@ -179,7 +179,7 @@ main {
 
 .collection-name {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
 }
 
 /* Record list */
@@ -213,7 +213,7 @@ main {
 }
 
 .record-rkey {
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   font-family: monospace;
 }
 
@@ -228,14 +228,14 @@ main {
 .record-detail pre {
   white-space: pre-wrap;
   word-break: break-all;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   line-height: 1.6;
   max-height: 80vh;
   overflow-y: auto;
 }
 
 .record-detail .at-uri {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   margin-bottom: var(--spacing-sm);
   word-break: break-all;
@@ -294,7 +294,7 @@ main {
   background: none;
   color: var(--color-danger);
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-family: inherit;
   display: inline-flex;
   align-items: center;
@@ -324,7 +324,7 @@ main {
   align-items: center;
   gap: var(--spacing-sm);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   border-radius: var(--radius-md);
   transition: background var(--transition-fast);
 }
@@ -345,7 +345,7 @@ main {
   background: var(--bg-webview);
   color: var(--color-text);
   font-family: monospace;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   resize: vertical;
   margin-bottom: var(--spacing-sm);
   outline: none;
@@ -366,7 +366,7 @@ main {
   background: var(--color-primary);
   color: var(--color-text-on-header);
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-family: inherit;
   font-weight: var(--font-weight-bold);
   display: inline-flex;
diff --git a/ui/homescreen/index.css b/ui/homescreen/index.css
index 2bdd3af..4d9fcad 100644
--- a/ui/homescreen/index.css
+++ b/ui/homescreen/index.css
@@ -111,7 +111,7 @@ body {
 }
 
 .bookmark-title {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   text-align: center;
   max-width: 80px;
   overflow: hidden;
diff --git a/ui/homescreen/widgets/clock/index.css b/ui/homescreen/widgets/clock/index.css
index 03524d7..11699b7 100644
--- a/ui/homescreen/widgets/clock/index.css
+++ b/ui/homescreen/widgets/clock/index.css
@@ -23,7 +23,7 @@ body {
 }
 
 .clock-date {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   margin-top: 2px;
 }
diff --git a/ui/homescreen/widgets/weather/index.css b/ui/homescreen/widgets/weather/index.css
index 202e082..570d5c2 100644
--- a/ui/homescreen/widgets/weather/index.css
+++ b/ui/homescreen/widgets/weather/index.css
@@ -28,11 +28,11 @@ body {
 }
 
 .condition {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
 }
 
 .location {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
 }
diff --git a/ui/keyboard/index.css b/ui/keyboard/index.css
index 332dee8..d154577 100644
--- a/ui/keyboard/index.css
+++ b/ui/keyboard/index.css
@@ -87,7 +87,7 @@ body {
   border-radius: 8px;
   color: var(--kb-text);
   font-family: var(--font-family-base);
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   font-weight: 500;
   cursor: pointer;
   display: flex;
@@ -154,7 +154,7 @@ body {
 }
 
 .key.layout-label {
-  font-size: 13px;
+  font-size: var(--font-size-base);
   color: transparent;
   animation: layout-label 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
@@ -187,7 +187,7 @@ body {
 
 .emoji-category-header {
   padding: 4px 2px;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--kb-text-muted);
 }
 
@@ -202,7 +202,7 @@ body {
   background: none;
   border: none;
   border-radius: 8px;
-  font-size: 22px;
+  font-size: var(--font-size-2xl);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -229,7 +229,7 @@ body {
   background: none;
   border: none;
   border-radius: 6px;
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   color: var(--kb-text);
   cursor: pointer;
   display: flex;
@@ -248,6 +248,6 @@ body {
 .emoji-tab.abc,
 .emoji-tab.backspace {
   transition: background-color 0.05s cubic-bezier(0.16, 1, 0.3, 1);
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   font-weight: var(--font-weight-bold);
 }
diff --git a/ui/settings/index.css b/ui/settings/index.css
index 012d845..e4e985b 100644
--- a/ui/settings/index.css
+++ b/ui/settings/index.css
@@ -25,7 +25,7 @@ body {
 input,
 select {
   padding: var(--spacing-sm) var(--spacing-md);
-  font-size: 1em;
+  font-size: var(--font-size-lg);
   font-family: var(--font-family-base);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
@@ -87,7 +87,7 @@ label {
 }
 
 .settings-sidebar h1 {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   padding: var(--spacing-md);
   border-bottom: 1px solid var(--color-border);
@@ -129,7 +129,7 @@ label {
 }
 
 .nav-item lucide-icon {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-xl);
 }
 
 /* Right content area: a plain block scroll pane. min-height:0 lets this flex
@@ -159,7 +159,7 @@ summary {
   align-items: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-md);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-xl);
   font-weight: var(--font-weight-bold);
   cursor: pointer;
   user-select: none;
@@ -194,7 +194,7 @@ summary lucide-icon {
   color: var(--color-text-secondary);
   margin-bottom: var(--spacing-sm);
   margin-top: var(--spacing-md);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 .category-description:first-child {
@@ -268,11 +268,11 @@ summary lucide-icon {
 
 .theme-name {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 .theme-description {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   margin-top: var(--spacing-xs);
 }
@@ -303,11 +303,11 @@ summary lucide-icon {
 
 .setting-label {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
 }
 
 .setting-description {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
 }
 
@@ -421,7 +421,7 @@ input:focus-visible + .toggle-slider {
   }
 
   .mobile-title {
-    font-size: var(--font-size-lg);
+    font-size: var(--font-size-xl);
     font-weight: var(--font-weight-bold);
   }
 
@@ -501,7 +501,7 @@ input:focus-visible + .toggle-slider {
   background: var(--bg-webview);
   color: inherit;
   cursor: pointer;
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   white-space: nowrap;
 }
 
@@ -515,7 +515,7 @@ input:focus-visible + .toggle-slider {
 }
 
 .p2p-id code {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   word-break: break-all;
 }
 
@@ -542,7 +542,7 @@ input:focus-visible + .toggle-slider {
   background: var(--bg-webview);
   color: inherit;
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   white-space: nowrap;
 }
 
@@ -557,17 +557,17 @@ input:focus-visible + .toggle-slider {
 
 .p2p-peer-name {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
 }
 
 .p2p-peer-id {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-tertiary);
   word-break: break-all;
 }
 
 .p2p-peer-status {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   padding: 2px var(--spacing-sm);
   border-radius: var(--radius-sm);
@@ -603,7 +603,7 @@ input:focus-visible + .toggle-slider {
   background: none;
   color: var(--color-danger);
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   white-space: nowrap;
 }
 
@@ -629,7 +629,7 @@ input:focus-visible + .toggle-slider {
 }
 
 .p2p-pin-code {
-  font-size: 1.6em;
+  font-size: var(--font-size-3xl);
   letter-spacing: 0.2em;
   font-weight: var(--font-weight-bold);
   color: var(--color-primary);
@@ -644,7 +644,7 @@ input:focus-visible + .toggle-slider {
   background: var(--bg-webview);
   color: inherit;
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   margin-top: var(--spacing-sm);
 }
 
@@ -669,7 +669,7 @@ input:focus-visible + .toggle-slider {
 
 .atproto-error {
   color: var(--color-danger);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   margin-top: var(--spacing-xs);
   padding: var(--spacing-xs) var(--spacing-sm);
   background: oklch(55% 0.15 25 / 0.1);
@@ -694,7 +694,7 @@ input:focus-visible + .toggle-slider {
 }
 
 .atproto-origin-url {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   word-break: break-all;
 }
 
@@ -704,7 +704,7 @@ input:focus-visible + .toggle-slider {
   color: var(--color-danger);
   cursor: pointer;
   padding: var(--spacing-xs) var(--spacing-sm);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   white-space: nowrap;
   border-radius: var(--radius-sm);
   display: flex;
@@ -734,12 +734,12 @@ input:focus-visible + .toggle-slider {
   background: var(--bg-webview);
   border: 1px solid var(--color-border);
   color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 .wifi-unavailable lucide-icon {
   color: var(--color-text-tertiary);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-xl);
 }
 
 /* Four-bar signal meter: bars grow left to right, lit ones use the accent. */
@@ -802,7 +802,7 @@ wifi-signal span.on {
 
 .wifi-active-name {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-xl);
 }
 
 .wifi-active-meta {
@@ -815,7 +815,7 @@ wifi-signal span.on {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   padding: 2px var(--spacing-sm);
   border-radius: var(--radius-sm);
@@ -834,7 +834,7 @@ wifi-signal span.on {
 }
 
 .wifi-active-detail {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   font-variant-numeric: tabular-nums;
 }
@@ -846,7 +846,7 @@ wifi-signal span.on {
   background: var(--bg-webview);
   color: inherit;
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   white-space: nowrap;
 }
 
@@ -869,7 +869,7 @@ wifi-signal span.on {
 
 .wifi-list-title {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
 }
 
 .wifi-rescan {
@@ -991,7 +991,7 @@ wifi-network[active] {
 }
 
 .wifi-network-name {
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1006,19 +1006,19 @@ wifi-network[active] {
 }
 
 .wifi-band {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   font-variant-numeric: tabular-nums;
 }
 
 .wifi-lock {
   color: var(--color-text-tertiary);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   flex-shrink: 0;
 }
 
 .wifi-network-state {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-primary);
   white-space: nowrap;
   flex-shrink: 0;
@@ -1044,7 +1044,7 @@ wifi-network[active] {
   border-radius: var(--radius-sm);
   border: 1px solid var(--color-border);
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 .wifi-connect-cancel {
@@ -1068,7 +1068,7 @@ wifi-network[active] {
 
 .wifi-connect-error {
   color: var(--color-danger);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 /* Focus rings on every control, sized for keyboard + d-pad use. */
@@ -1084,5 +1084,5 @@ wifi-network[active] {
   padding: var(--spacing-lg) var(--spacing-md);
   text-align: center;
   color: var(--color-text-tertiary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
diff --git a/ui/system/color_picker.css b/ui/system/color_picker.css
index d7db3a2..494ab36 100644
--- a/ui/system/color_picker.css
+++ b/ui/system/color_picker.css
@@ -31,7 +31,7 @@
   padding: var(--spacing-md);
   min-width: 280px;
   font-family: var(--font-family-base);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 .picker-main {
diff --git a/ui/system/content_blocker_panel.js b/ui/system/content_blocker_panel.js
index 03dcc6f..3180285 100644
--- a/ui/system/content_blocker_panel.js
+++ b/ui/system/content_blocker_panel.js
@@ -58,7 +58,7 @@ class ContentBlockerPanel extends LitElement {
     }
 
     .origin {
-      font-size: var(--font-size-sm);
+      font-size: var(--font-size-base);
       color: var(--color-text-secondary);
       white-space: nowrap;
       overflow: hidden;
@@ -73,7 +73,7 @@ class ContentBlockerPanel extends LitElement {
     }
 
     .toggle-label {
-      font-size: var(--font-size-sm);
+      font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
     }
 
@@ -125,7 +125,7 @@ class ContentBlockerPanel extends LitElement {
     }
 
     .stats {
-      font-size: var(--font-size-xs);
+      font-size: var(--font-size-sm);
       color: var(--color-text-tertiary);
     }
 
diff --git a/ui/system/desktop/desk_stack_chip.css b/ui/system/desktop/desk_stack_chip.css
index f4d01eb..c8129b6 100644
--- a/ui/system/desktop/desk_stack_chip.css
+++ b/ui/system/desktop/desk_stack_chip.css
@@ -17,7 +17,7 @@
   border: 1px solid oklch(35% 0.03 105 / 0.14);
   border-radius: 9px 10px 9px 10px;
   font-family: inherit;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-secondary);
   cursor: pointer;
@@ -44,7 +44,7 @@
 }
 
 .icon {
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
 }
 
diff --git a/ui/system/desktop/dock.css b/ui/system/desktop/dock.css
index 928570e..588e905 100644
--- a/ui/system/desktop/dock.css
+++ b/ui/system/desktop/dock.css
@@ -133,7 +133,7 @@ body[data-dock-hidden] .dock {
 
 .dock-empty {
   padding: 6px 12px;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   font-style: italic;
 }
@@ -163,7 +163,7 @@ body[data-dock-hidden] .dock {
 
 .tray-time-hour {
   font-family: "Pacifico", var(--font-family-base);
-  font-size: 18px;
+  font-size: var(--font-size-xl);
   color: oklch(28% 0.04 70);
   font-variant-numeric: tabular-nums;
   letter-spacing: -0.01em;
@@ -172,7 +172,7 @@ body[data-dock-hidden] .dock {
 
 .tray-time-date {
   font-family: var(--font-family-base);
-  font-size: 9px;
+  font-size: var(--font-size-2xs);
   color: var(--color-text-tertiary);
   letter-spacing: 0.05em;
 }
@@ -189,7 +189,7 @@ body[data-dock-hidden] .dock {
   border-radius: var(--dock-pin-radius);
   color: var(--color-text-secondary);
   cursor: pointer;
-  font-size: 15px;
+  font-size: var(--font-size-md);
   transition:
     background var(--transition-fast),
     color var(--transition-fast);
@@ -211,7 +211,7 @@ body[data-dock-hidden] .dock {
   right: 4px;
   background: oklch(72% 0.08 78);
   color: oklch(28% 0.04 70);
-  font-size: 9px;
+  font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-bold);
   padding: 1px 4px;
   border-radius: 6px;
@@ -232,7 +232,7 @@ body[data-dock-hidden] .dock {
   border-radius: 8px;
   background: oklch(66% 0.16 58);
   color: oklch(99% 0.005 105);
-  font-size: 9px;
+  font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-bold);
   font-variant-numeric: tabular-nums;
   display: flex;
diff --git a/ui/system/desktop/dock_desk_chip.css b/ui/system/desktop/dock_desk_chip.css
index 610416b..109a370 100644
--- a/ui/system/desktop/dock_desk_chip.css
+++ b/ui/system/desktop/dock_desk_chip.css
@@ -16,7 +16,7 @@
   border-radius: 11px 12px 11px 12px;
   color: var(--color-text-secondary);
   font-family: inherit;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   cursor: pointer;
   transition:
     background var(--transition-fast),
diff --git a/ui/system/desktop/dock_view_chip.css b/ui/system/desktop/dock_view_chip.css
index f282f6c..f4e7ae6 100644
--- a/ui/system/desktop/dock_view_chip.css
+++ b/ui/system/desktop/dock_view_chip.css
@@ -15,7 +15,7 @@
   border-radius: 11px 12px 11px 12px;
   color: var(--color-text-secondary);
   font-family: inherit;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   cursor: pointer;
   max-width: var(--dock-chip-max-width, 160px);
   transition:
diff --git a/ui/system/desktop/misc.css b/ui/system/desktop/misc.css
index 26c5dfe..f1125e8 100644
--- a/ui/system/desktop/misc.css
+++ b/ui/system/desktop/misc.css
@@ -17,7 +17,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   cursor: help;
   backdrop-filter: blur(8px);
@@ -63,7 +63,7 @@ body[data-dock-position="left"] .help-card {
   border: 1px solid oklch(35% 0.03 105 / 0.14);
   border-radius: 14px 16px 14px 15px;
   box-shadow: var(--workshop-shadow);
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   display: none;
   cursor: default;
@@ -112,7 +112,7 @@ body[data-debug] .layer.chrome .palette {
 .debug-tag {
   position: absolute;
   font-family: var(--font-family-base);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   letter-spacing: 0.06em;
   text-transform: lowercase;
diff --git a/ui/system/desktop/notification_panel.css b/ui/system/desktop/notification_panel.css
index d06cb72..b316b65 100644
--- a/ui/system/desktop/notification_panel.css
+++ b/ui/system/desktop/notification_panel.css
@@ -52,7 +52,7 @@
 
 .header-title {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   color: var(--color-text);
 }
 
@@ -65,7 +65,7 @@
   background: none;
   border: none;
   color: var(--color-primary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   cursor: pointer;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--radius-sm);
@@ -148,9 +148,11 @@
   min-width: 0;
 }
 
+/* List rows use the dense small end of the type scale, matching the repos /
+   peers dock popovers: sm (12px) for the title, 2xs (10px) for body and meta. */
 .notification-title {
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-sm);
   color: var(--color-text);
   margin-bottom: var(--spacing-xs);
   white-space: nowrap;
@@ -159,7 +161,7 @@
 }
 
 .notification-body {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-2xs);
   color: var(--color-text-secondary);
   overflow: hidden;
 }
@@ -169,7 +171,7 @@
   align-items: center;
   gap: var(--spacing-sm);
   margin-top: var(--spacing-xs);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-2xs);
   color: var(--color-text-tertiary);
 }
 
@@ -220,7 +222,7 @@
 }
 
 .empty-state-text {
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-sm);
 }
 
 /* Transparent full-viewport catcher: a click outside the panel closes it,
diff --git a/ui/system/desktop/overview.css b/ui/system/desktop/overview.css
index 8c83344..9d75873 100644
--- a/ui/system/desktop/overview.css
+++ b/ui/system/desktop/overview.css
@@ -63,7 +63,7 @@ body[data-overview-open] .overview {
 }
 
 .overview-header-icon {
-  font-size: 14px;
+  font-size: var(--font-size-md);
   color: var(--color-text-secondary);
 }
 
@@ -71,12 +71,12 @@ body[data-overview-open] .overview {
   font-style: italic;
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
-  font-size: 13px;
+  font-size: var(--font-size-base);
 }
 
 .overview-summary {
   flex: 1;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
   font-variant-numeric: tabular-nums;
 }
@@ -91,7 +91,7 @@ body[data-overview-open] .overview {
   border-radius: 8px;
   padding: 3px 9px 3px 7px;
   font-family: inherit;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   cursor: pointer;
   transition:
@@ -102,7 +102,7 @@ body[data-overview-open] .overview {
 
 .overview-mode-toggle i,
 .overview-new-desk i {
-  font-size: 12px;
+  font-size: var(--font-size-sm);
 }
 
 .overview-mode-toggle:hover,
@@ -123,7 +123,7 @@ body[data-overview-open] .overview {
   border-radius: 7px;
   color: var(--color-text-secondary);
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--font-size-md);
   transition: background var(--transition-fast);
 }
 
@@ -153,7 +153,7 @@ body[data-overview-open] .overview {
   align-items: baseline;
   gap: 8px;
   padding: 12px 20px 0;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   font-style: italic;
   color: var(--color-text-tertiary);
@@ -161,7 +161,7 @@ body[data-overview-open] .overview {
 }
 
 .overview-section-label i {
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   font-style: normal;
 }
@@ -171,7 +171,7 @@ body[data-overview-open] .overview {
   font-style: italic;
   font-weight: var(--font-weight-normal);
   color: var(--color-text-tertiary);
-  font-size: 10px;
+  font-size: var(--font-size-2xs);
 }
 
 /* Surface preview: mirrors the real tile grid so the user sees exactly
@@ -191,7 +191,7 @@ body[data-overview-open] .overview {
   width: 100%;
   height: 100%;
   color: var(--color-text-tertiary);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-style: italic;
   background: oklch(94% 0.02 95 / 0.4);
 }
@@ -220,7 +220,7 @@ body[data-overview-open] .overview {
   grid-column: 1 / -1;
   text-align: center;
   padding: 22px 20px;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
   font-style: italic;
 }
diff --git a/ui/system/desktop/overview_card.css b/ui/system/desktop/overview_card.css
index 4535eef..a241061 100644
--- a/ui/system/desktop/overview_card.css
+++ b/ui/system/desktop/overview_card.css
@@ -55,7 +55,7 @@
   justify-content: center;
   color: oklch(99% 0.005 105 / 0.85);
   font-weight: var(--font-weight-bold);
-  font-size: 18px;
+  font-size: var(--font-size-xl);
   letter-spacing: 0.04em;
   text-shadow: 0 1px 2px oklch(20% 0.04 250 / 0.4);
 }
@@ -65,7 +65,7 @@
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   background: var(--bg-icon);
   border-top: 1px solid var(--color-border);
 }
@@ -104,7 +104,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   opacity: 0;
   transition: opacity var(--transition-fast);
 }
diff --git a/ui/system/desktop/overview_slot.css b/ui/system/desktop/overview_slot.css
index bec5f09..eca8042 100644
--- a/ui/system/desktop/overview_slot.css
+++ b/ui/system/desktop/overview_slot.css
@@ -61,7 +61,7 @@
   justify-content: center;
   color: oklch(99% 0.005 105 / 0.85);
   font-weight: var(--font-weight-bold);
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   letter-spacing: 0.04em;
   text-shadow: 0 1px 2px oklch(20% 0.04 250 / 0.4);
 }
@@ -79,8 +79,8 @@
   align-items: center;
   gap: 6px;
   padding: 5px 9px;
-  font-size: 10px;
-  background: color-mix(in oklab, var(--bg-icon), transparent 12%);
+  font-size: var(--font-size-2xs);
+  background: color-mix(in oklab, var(--bg-icon), transparent 25%);
   border-top: 1px solid var(--color-border);
 }
 
diff --git a/ui/system/desktop/palette.css b/ui/system/desktop/palette.css
index 25af574..9e1e6b9 100644
--- a/ui/system/desktop/palette.css
+++ b/ui/system/desktop/palette.css
@@ -59,7 +59,7 @@ body[data-palette-open] .palette {
 }
 
 .palette-search-icon {
-  font-size: 18px;
+  font-size: var(--font-size-xl);
   color: var(--color-text-tertiary);
 }
 
@@ -68,7 +68,7 @@ body[data-palette-open] .palette {
   border: none;
   background: transparent;
   outline: none;
-  font-size: 17px;
+  font-size: var(--font-size-lg);
   color: var(--color-text);
   font-family: inherit;
   min-width: 0;
@@ -88,7 +88,7 @@ body[data-palette-open] .palette {
   display: flex;
   gap: 16px;
   padding: 10px 22px;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
   background: var(--bg-surface);
   border-top: 1px solid oklch(35% 0.03 105 / 0.08);
diff --git a/ui/system/desktop/palette_results.css b/ui/system/desktop/palette_results.css
index a64246e..91fbb5a 100644
--- a/ui/system/desktop/palette_results.css
+++ b/ui/system/desktop/palette_results.css
@@ -24,7 +24,7 @@
 
 .palette-group-title {
   font-style: italic;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-tertiary);
   padding: 4px 22px 6px;
@@ -36,7 +36,7 @@
   align-items: center;
   gap: 12px;
   padding: 9px 22px;
-  font-size: 14px;
+  font-size: var(--font-size-md);
   cursor: pointer;
   color: var(--color-text);
   background: transparent;
@@ -71,7 +71,7 @@
   border-radius: 6px;
   background: var(--bg-icon);
   color: var(--color-text-secondary);
-  font-size: 13px;
+  font-size: var(--font-size-base);
   flex-shrink: 0;
 }
 
@@ -96,7 +96,7 @@
 }
 
 .palette-item-sub {
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
   white-space: nowrap;
   overflow: hidden;
diff --git a/ui/system/desktop/peers_popover.css b/ui/system/desktop/peers_popover.css
index 09594ab..e33dd7a 100644
--- a/ui/system/desktop/peers_popover.css
+++ b/ui/system/desktop/peers_popover.css
@@ -32,7 +32,7 @@
 
 .peers-popover-title {
   padding: 4px 8px 6px;
-  font-size: 10px;
+  font-size: var(--font-size-2xs);
   font-style: italic;
   color: var(--color-text-tertiary);
   letter-spacing: 0.04em;
@@ -54,7 +54,7 @@
   gap: 9px;
   padding: 7px 9px;
   border-radius: 7px 8px 7px 8px;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text);
 }
 
@@ -77,7 +77,7 @@
 
 .peers-popover-icon {
   width: 16px;
-  font-size: 14px;
+  font-size: var(--font-size-md);
   color: var(--color-text-tertiary);
   flex-shrink: 0;
   display: inline-flex;
@@ -94,7 +94,7 @@
 
 .peers-popover-empty {
   padding: 10px 10px 12px;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   font-style: italic;
   color: var(--color-text-tertiary);
   text-align: center;
diff --git a/ui/system/desktop/repos_popover.css b/ui/system/desktop/repos_popover.css
index bc66bf1..17e4228 100644
--- a/ui/system/desktop/repos_popover.css
+++ b/ui/system/desktop/repos_popover.css
@@ -37,7 +37,7 @@
   justify-content: space-between;
   gap: 8px;
   padding: 4px 6px 6px 8px;
-  font-size: 10px;
+  font-size: var(--font-size-2xs);
   font-style: italic;
   color: var(--color-text-tertiary);
   letter-spacing: 0.04em;
@@ -57,7 +57,7 @@
   background: transparent;
   color: var(--color-text-secondary);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--font-size-base);
   transition:
     background var(--transition-fast),
     color var(--transition-fast);
@@ -95,7 +95,7 @@
   gap: 10px;
   padding: 7px 9px;
   border-radius: 7px 8px 7px 8px;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text);
 }
 
@@ -122,7 +122,7 @@
 }
 
 .repos-popover-sub {
-  font-size: 10.5px;
+  font-size: var(--font-size-2xs);
   color: var(--color-text-tertiary);
   white-space: nowrap;
   overflow: hidden;
@@ -153,7 +153,7 @@
 
 .repos-popover-empty {
   padding: 10px 10px 12px;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   font-style: italic;
   color: var(--color-text-tertiary);
   text-align: center;
diff --git a/ui/system/desktop/topbar.css b/ui/system/desktop/topbar.css
index a37abe4..f046873 100644
--- a/ui/system/desktop/topbar.css
+++ b/ui/system/desktop/topbar.css
@@ -26,7 +26,7 @@
   backdrop-filter: blur(10px) saturate(1.05);
   -webkit-backdrop-filter: blur(10px) saturate(1.05);
   border-bottom: 1px solid oklch(35% 0.03 105 / 0.08);
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   z-index: 10;
   transition:
@@ -92,7 +92,7 @@ body[data-focus="page"] .topbar-page {
   border-radius: 6px;
   padding: 3px 8px;
   font-family: inherit;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   cursor: pointer;
   transition:
@@ -106,7 +106,7 @@ body[data-focus="page"] .topbar-page {
 }
 
 .topbar-action i {
-  font-size: 13px;
+  font-size: var(--font-size-base);
 }
 
 .topbar-ambient {
@@ -126,7 +126,7 @@ body[data-focus="page"] .topbar-page {
 .topbar-desk-name {
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   /* Italic reads as "this place" rather than a navigational label. */
   font-style: italic;
 }
@@ -170,7 +170,7 @@ body[data-focus="page"] .topbar-page {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   cursor: pointer;
   padding: 2px 4px;
   margin: 0 -4px;
@@ -184,7 +184,7 @@ body[data-focus="page"] .topbar-page {
 
 .topbar-host {
   color: var(--color-text-tertiary);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   white-space: nowrap;
   margin-left: 0;
   flex-shrink: 1;
@@ -218,7 +218,7 @@ body[data-focus="page"] .topbar-page {
   border-radius: 5px;
   color: var(--color-text-secondary);
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--font-size-base);
   flex-shrink: 0;
   transition:
     background var(--transition-fast),
@@ -275,7 +275,7 @@ body[data-focus="page"] .topbar-page {
   border-radius: 8px;
   background: var(--color-primary);
   color: var(--color-text-on-header);
-  font-size: 9px;
+  font-size: var(--font-size-2xs);
   font-weight: 700;
   line-height: 14px;
   text-align: center;
@@ -342,7 +342,7 @@ body[data-focus="page"] .topbar-page {
 
 .topbar-menu-item i {
   flex: 0 0 16px;
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   opacity: 0.78;
 }
 
@@ -393,7 +393,7 @@ body[data-focus="page"] .topbar-page {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  font-size: 10px;
+  font-size: var(--font-size-2xs);
   font-style: italic;
   color: var(--color-text-tertiary);
   letter-spacing: 0.04em;
@@ -401,7 +401,7 @@ body[data-focus="page"] .topbar-page {
 
 .desk-settings-name {
   font: inherit;
-  font-size: 13px;
+  font-size: var(--font-size-base);
   font-style: normal;
   color: var(--color-text);
   background: var(--bg-surface);
@@ -423,7 +423,7 @@ body[data-focus="page"] .topbar-page {
   border: 0;
   border-radius: calc(var(--radius-sm) - 2px);
   font: inherit;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-bold);
   align-self: flex-start;
   padding: 6px 12px;
diff --git a/ui/system/desktop/url_records_popover.js b/ui/system/desktop/url_records_popover.js
index 2255ec5..929d78c 100644
--- a/ui/system/desktop/url_records_popover.js
+++ b/ui/system/desktop/url_records_popover.js
@@ -73,7 +73,7 @@ class UrlRecordsPopover extends LitElement {
     }
     .title {
       padding: 4px 8px 6px;
-      font-size: 10px;
+      font-size: var(--font-size-2xs);
       font-style: italic;
       color: var(--color-text-tertiary);
       letter-spacing: 0.04em;
@@ -93,7 +93,7 @@ class UrlRecordsPopover extends LitElement {
       gap: 10px;
       padding: 7px 9px;
       border-radius: 7px 8px 7px 8px;
-      font-size: 12px;
+      font-size: var(--font-size-sm);
       color: var(--color-text);
       background: transparent;
       border: none;
@@ -125,7 +125,7 @@ class UrlRecordsPopover extends LitElement {
       text-overflow: ellipsis;
     }
     .sub {
-      font-size: 10.5px;
+      font-size: var(--font-size-2xs);
       color: var(--color-text-tertiary);
       white-space: nowrap;
       overflow: hidden;
diff --git a/ui/system/desktop/working.css b/ui/system/desktop/working.css
index 97a15e4..9b3c7c1 100644
--- a/ui/system/desktop/working.css
+++ b/ui/system/desktop/working.css
@@ -192,7 +192,7 @@ body.popover-open web-view {
   gap: 8px;
   padding: 0 4px 0 10px;
   background: var(--bg-icon);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   border-bottom: 1px solid var(--color-border);
   cursor: grab;
@@ -214,7 +214,7 @@ body.popover-open web-view {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
 }
 
 .desk-tile-close {
@@ -228,7 +228,7 @@ body.popover-open web-view {
   border-radius: 5px;
   color: var(--color-text-secondary);
   cursor: pointer;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   flex-shrink: 0;
   transition:
     background var(--transition-fast),
diff --git a/ui/system/index.css b/ui/system/index.css
index 5579d3c..a66202c 100644
--- a/ui/system/index.css
+++ b/ui/system/index.css
@@ -160,7 +160,7 @@ main.before-splash {
 }
 
 .sidebar-preview-title {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   margin-bottom: var(--spacing-xs);
   white-space: nowrap;
@@ -303,7 +303,7 @@ body.resizing web-view {
   border-radius: 0.5em;
   background: var(--color-danger);
   color: var(--color-text-on-header);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   display: flex;
   align-items: center;
@@ -342,7 +342,7 @@ body.resizing web-view {
 
 #pairing-dialog h2,
 #p2p-open-dialog h2 {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-xl);
   margin: 0 0 var(--spacing-md);
 }
 
@@ -358,7 +358,7 @@ body.resizing web-view {
 }
 
 .pairing-request-id {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   word-break: break-all;
   margin-bottom: var(--spacing-sm);
@@ -374,7 +374,7 @@ body.resizing web-view {
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 .btn-accept {
diff --git a/ui/system/media_control.css b/ui/system/media_control.css
index a33a4a0..004e964 100644
--- a/ui/system/media_control.css
+++ b/ui/system/media_control.css
@@ -19,7 +19,7 @@
 }
 
 .media-device {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   margin-bottom: var(--spacing-xs);
 }
@@ -30,7 +30,7 @@
 }
 
 .media-title {
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   white-space: nowrap;
@@ -39,7 +39,7 @@
 }
 
 .media-artist {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   white-space: nowrap;
   overflow: hidden;
@@ -81,7 +81,7 @@
 }
 
 .media-time {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
   min-width: 3em;
   text-align: center;
diff --git a/ui/system/mediacenter/ambient_view.js b/ui/system/mediacenter/ambient_view.js
index e8b9398..1dad8d6 100644
--- a/ui/system/mediacenter/ambient_view.js
+++ b/ui/system/mediacenter/ambient_view.js
@@ -577,13 +577,13 @@ class AmbientView extends LitElement {
     }
 
     .weather lucide-icon {
-      font-size: 1.4em;
+      font-size: var(--font-size-lg);
     }
 
     .weather-temp {
       font-weight: var(--font-weight-bold);
       color: var(--mc-text-secondary);
-      font-size: 1.1em;
+      font-size: var(--font-size-base);
     }
 
     .weather-separator {
diff --git a/ui/system/mediacenter/content_browser.js b/ui/system/mediacenter/content_browser.js
index ab6d16e..d63e060 100644
--- a/ui/system/mediacenter/content_browser.js
+++ b/ui/system/mediacenter/content_browser.js
@@ -30,7 +30,7 @@ class ContentBrowser extends LitElement {
     }
 
     .header-title {
-      font-size: 2em;
+      font-size: var(--font-size-2xl);
       font-weight: var(--font-weight-bold);
       color: var(--mc-text-primary);
       font-family: Pacifico, cursive;
@@ -88,7 +88,7 @@ class ContentBrowser extends LitElement {
     }
 
     .item lucide-icon {
-      font-size: 1.5em;
+      font-size: var(--font-size-lg);
       color: var(--mc-accent);
     }
 
@@ -98,13 +98,13 @@ class ContentBrowser extends LitElement {
     }
 
     .item-title {
-      font-size: 1.15em;
+      font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
       line-height: 1.3;
     }
 
     .item-subtitle {
-      font-size: 0.85em;
+      font-size: var(--font-size-xs);
       color: var(--mc-text-muted);
       white-space: nowrap;
       overflow: hidden;
@@ -113,7 +113,7 @@ class ContentBrowser extends LitElement {
     }
 
     .media-indicator {
-      font-size: 0.75em;
+      font-size: var(--font-size-2xs);
       color: var(--mc-accent);
       display: flex;
       align-items: center;
@@ -141,7 +141,7 @@ class ContentBrowser extends LitElement {
 
     /* Hint — right-aligned, only visible when item is focused */
     .close-hint {
-      font-size: 0.75em;
+      font-size: var(--font-size-2xs);
       color: var(--mc-text-muted);
       opacity: 0;
       transition: opacity var(--mc-transition-fast);
@@ -173,7 +173,7 @@ class ContentBrowser extends LitElement {
       border-radius: var(--radius-md);
       background: var(--mc-danger-bg);
       color: var(--mc-danger);
-      font-size: 0.9em;
+      font-size: var(--font-size-sm);
       font-weight: var(--font-weight-bold);
       white-space: nowrap;
       outline: 2px solid oklch(55% 0.1 35 / 0.5);
@@ -182,7 +182,7 @@ class ContentBrowser extends LitElement {
     }
 
     .close-pill lucide-icon {
-      font-size: 1em;
+      font-size: var(--font-size-sm);
       color: inherit;
     }
 
@@ -201,7 +201,7 @@ class ContentBrowser extends LitElement {
       padding: 3em;
       text-align: center;
       color: var(--mc-text-muted);
-      font-size: 1.1em;
+      font-size: var(--font-size-base);
     }
   `;
 
diff --git a/ui/system/mediacenter/index.css b/ui/system/mediacenter/index.css
index cd668c4..76beddc 100644
--- a/ui/system/mediacenter/index.css
+++ b/ui/system/mediacenter/index.css
@@ -42,6 +42,21 @@
   --mc-transition-fast: 0.18s var(--mc-ease);
   --mc-transition-medium: 0.3s var(--mc-ease);
   --mc-transition-slow: 0.5s var(--mc-ease);
+
+  /* Type scale for 3m TV viewing: the shared token names, but ~1.5x the
+     desktop values. This file loads after the theme, so these win for the
+     mediacenter document (and video_player.html, which also loads it), while
+     the desktop chrome keeps the smaller theme values. The ambient / hero
+     text stays fluid (clamp + vw) and does not use these. */
+  --font-size-2xs: 0.9375rem; /* 15px : dock micro-label, indicators, hints */
+  --font-size-xs: 1rem; /* 16px : descriptions, subtitles, url, status */
+  --font-size-sm: 1.125rem; /* 18px : timestamps, small icons */
+  --font-size-base: 1.1875rem; /* 19px : names, labels, item titles, temp */
+  --font-size-md: 1.3125rem; /* 21px : request / choice icons */
+  --font-size-lg: 1.5rem; /* 24px : menu / list icons */
+  --font-size-xl: 1.6875rem; /* 27px : player control / seek icons */
+  --font-size-2xl: 2.0625rem; /* 33px : panel / menu titles, dock icons */
+  --font-size-3xl: 2.625rem; /* 42px : play + center-overlay icons */
 }
 
 /* ===== Reset & base ===== */
diff --git a/ui/system/mediacenter/nav_dock.js b/ui/system/mediacenter/nav_dock.js
index 7540177..2b5fe66 100644
--- a/ui/system/mediacenter/nav_dock.js
+++ b/ui/system/mediacenter/nav_dock.js
@@ -68,11 +68,11 @@ class NavDock extends LitElement {
     }
 
     .dock-item lucide-icon {
-      font-size: 2em;
+      font-size: var(--font-size-2xl);
     }
 
     .dock-item .label {
-      font-size: 0.8em;
+      font-size: var(--font-size-xs);
       font-weight: var(--font-weight-bold);
       letter-spacing: 0.02em;
     }
@@ -87,7 +87,7 @@ class NavDock extends LitElement {
       border-radius: 0.6em;
       background: var(--color-primary);
       color: var(--color-text-on-header);
-      font-size: 0.65em;
+      font-size: var(--font-size-2xs);
       font-weight: var(--font-weight-bold);
       display: flex;
       align-items: center;
diff --git a/ui/system/mediacenter/notification_panel.js b/ui/system/mediacenter/notification_panel.js
index af87ff6..ab556ae 100644
--- a/ui/system/mediacenter/notification_panel.js
+++ b/ui/system/mediacenter/notification_panel.js
@@ -45,7 +45,7 @@ class NotificationPanelMC extends LitElement {
 
     .panel-title {
       font-family: Pacifico, cursive;
-      font-size: 2em;
+      font-size: var(--font-size-2xl);
       color: var(--mc-text-primary);
       text-align: center;
       margin-bottom: 1.2em;
@@ -74,17 +74,17 @@ class NotificationPanelMC extends LitElement {
     }
 
     .request-header lucide-icon {
-      font-size: 1.3em;
+      font-size: var(--font-size-md);
       color: var(--color-primary);
     }
 
     .request-name {
-      font-size: 1.1em;
+      font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
     }
 
     .request-label {
-      font-size: 0.8em;
+      font-size: var(--font-size-xs);
       color: var(--mc-text-muted);
       margin-top: 0.1em;
     }
@@ -108,7 +108,7 @@ class NotificationPanelMC extends LitElement {
     }
 
     .action-item lucide-icon {
-      font-size: 1.1em;
+      font-size: var(--font-size-base);
     }
 
     .action-item.accept lucide-icon {
@@ -124,7 +124,7 @@ class NotificationPanelMC extends LitElement {
     }
 
     .action-status {
-      font-size: 0.85em;
+      font-size: var(--font-size-xs);
       color: var(--mc-text-muted);
       padding: 0.7em 1.5em 0.7em 3.5em;
     }
@@ -133,7 +133,7 @@ class NotificationPanelMC extends LitElement {
       text-align: center;
       color: var(--mc-text-muted);
       padding: 2em;
-      font-size: 1.1em;
+      font-size: var(--font-size-base);
     }
   `;
 
diff --git a/ui/system/mediacenter/now_playing.js b/ui/system/mediacenter/now_playing.js
index aa5c70b..4898279 100644
--- a/ui/system/mediacenter/now_playing.js
+++ b/ui/system/mediacenter/now_playing.js
@@ -84,7 +84,7 @@ class NowPlaying extends LitElement {
       align-items: center;
       gap: 1em;
       color: var(--mc-text-secondary);
-      font-size: 0.9em;
+      font-size: var(--font-size-sm);
       font-variant-numeric: tabular-nums;
     }
 
@@ -137,7 +137,7 @@ class NowPlaying extends LitElement {
     }
 
     .control-btn lucide-icon {
-      font-size: 1.6em;
+      font-size: var(--font-size-xl);
     }
 
     .control-btn.play {
@@ -147,7 +147,7 @@ class NowPlaying extends LitElement {
     }
 
     .control-btn.play lucide-icon {
-      font-size: 2.2em;
+      font-size: var(--font-size-3xl);
     }
 
     .control-btn.play.focused {
diff --git a/ui/system/mediacenter/open_in_dialog.js b/ui/system/mediacenter/open_in_dialog.js
index cf041e8..6d4759b 100644
--- a/ui/system/mediacenter/open_in_dialog.js
+++ b/ui/system/mediacenter/open_in_dialog.js
@@ -46,7 +46,7 @@ class OpenInDialog extends LitElement {
 
     .panel-title {
       font-family: Pacifico, cursive;
-      font-size: 2em;
+      font-size: var(--font-size-2xl);
       color: var(--mc-text-primary);
       text-align: center;
       margin-bottom: 1em;
@@ -55,7 +55,7 @@ class OpenInDialog extends LitElement {
     .panel-url {
       text-align: center;
       color: var(--mc-text-muted);
-      font-size: 0.85em;
+      font-size: var(--font-size-xs);
       margin-bottom: 0.8em;
       word-break: break-all;
     }
@@ -79,17 +79,17 @@ class OpenInDialog extends LitElement {
     }
 
     .choice-item lucide-icon {
-      font-size: 1.3em;
+      font-size: var(--font-size-md);
       color: var(--color-primary);
     }
 
     .choice-label {
-      font-size: 1.1em;
+      font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
     }
 
     .choice-description {
-      font-size: 0.8em;
+      font-size: var(--font-size-xs);
       color: var(--mc-text-muted);
       margin-top: 0.15em;
     }
diff --git a/ui/system/mediacenter/system_menu.js b/ui/system/mediacenter/system_menu.js
index 17f8167..e803801 100644
--- a/ui/system/mediacenter/system_menu.js
+++ b/ui/system/mediacenter/system_menu.js
@@ -44,7 +44,7 @@ class SystemMenu extends LitElement {
 
     .menu-title {
       font-family: Pacifico, cursive;
-      font-size: 2em;
+      font-size: var(--font-size-2xl);
       color: var(--mc-text-primary);
       text-align: center;
       margin-bottom: 1.2em;
@@ -69,16 +69,16 @@ class SystemMenu extends LitElement {
     }
 
     .menu-item lucide-icon {
-      font-size: 1.4em;
+      font-size: var(--font-size-lg);
     }
 
     .menu-item .label {
-      font-size: 1.1em;
+      font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
     }
 
     .menu-item .description {
-      font-size: 0.8em;
+      font-size: var(--font-size-xs);
       color: var(--mc-text-muted);
       margin-top: 0.15em;
     }
diff --git a/ui/system/mediacenter/video_player.html b/ui/system/mediacenter/video_player.html
index 44419e5..2e86423 100644
--- a/ui/system/mediacenter/video_player.html
+++ b/ui/system/mediacenter/video_player.html
@@ -97,7 +97,7 @@
       }
 
       .time {
-        font-size: 0.9em;
+        font-size: var(--font-size-sm);
         color: var(--mc-text-secondary);
         min-width: 4em;
         font-variant-numeric: tabular-nums;
@@ -167,7 +167,7 @@
       }
 
       .btn-seek lucide-icon {
-        font-size: 1.6em;
+        font-size: var(--font-size-xl);
       }
 
       .btn-play {
@@ -177,7 +177,7 @@
       }
 
       .btn-play lucide-icon {
-        font-size: 2.2em;
+        font-size: var(--font-size-3xl);
       }
 
       .btn.focused {
@@ -219,7 +219,7 @@
       }
 
       .center-indicator lucide-icon {
-        font-size: 2.5em;
+        font-size: var(--font-size-3xl);
       }
     </style>
   </head>
diff --git a/ui/system/menu_shared.css b/ui/system/menu_shared.css
index 48cc05d..244512f 100644
--- a/ui/system/menu_shared.css
+++ b/ui/system/menu_shared.css
@@ -10,7 +10,7 @@ menu {
   min-width: var(--size-menu-width);
   overflow: hidden;
   font-family: var(--font-family-base);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   padding-left: 0;
   animation: menu-in 0.15s cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top left;
diff --git a/ui/system/mobile/pebble.css b/ui/system/mobile/pebble.css
index 428c2a1..16b5c42 100644
--- a/ui/system/mobile/pebble.css
+++ b/ui/system/mobile/pebble.css
@@ -216,7 +216,7 @@
 .ambient-favicon {
   width: 18px;
   height: 18px;
-  font-size: 18px;
+  font-size: var(--font-size-xl);
   line-height: 1;
   object-fit: contain;
   border-radius: 4px;
@@ -224,7 +224,7 @@
 }
 
 .meta-tabs {
-  font-size: 10px;
+  font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-secondary);
   background: var(--bg-icon);
@@ -306,7 +306,7 @@
 
 .search-icon {
   color: var(--color-text-tertiary);
-  font-size: 18px;
+  font-size: var(--font-size-xl);
 }
 
 .search-input {
@@ -315,7 +315,7 @@
   background: transparent;
   outline: none;
   font-family: inherit;
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   color: var(--color-text);
   min-width: 0;
 }
@@ -335,7 +335,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   cursor: pointer;
   transition:
     transform var(--transition-fast),
@@ -367,7 +367,7 @@
   color: var(--color-text-secondary);
   cursor: pointer;
   font-family: inherit;
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-normal);
   min-height: 56px;
   transition:
@@ -392,7 +392,7 @@
 }
 
 .pin-glyph {
-  font-size: 22px;
+  font-size: var(--font-size-2xl);
 }
 
 .pin-label {
@@ -400,7 +400,7 @@
 }
 
 .pin-more .pin-glyph {
-  font-size: 18px;
+  font-size: var(--font-size-xl);
 }
 
 .tab-strip {
@@ -428,7 +428,7 @@
   color: var(--color-text-secondary);
   cursor: pointer;
   font-family: inherit;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   max-width: 160px;
   transition:
     background var(--transition-fast),
@@ -500,7 +500,7 @@
   background: transparent;
   border: none;
   font-family: inherit;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-secondary);
   cursor: pointer;
@@ -541,7 +541,7 @@
   display: flex;
   align-items: baseline;
   font-family: var(--font-family-base);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-secondary);
   margin: 0;
@@ -553,7 +553,7 @@
   font-weight: var(--font-weight-normal);
   margin-left: 6px;
   color: var(--color-text-tertiary);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   font-variant-numeric: tabular-nums;
 }
 
@@ -628,7 +628,7 @@
 }
 
 .tab-thumb-placeholder lucide-icon {
-  font-size: 28px;
+  font-size: var(--font-size-3xl);
   color: var(--color-text-tertiary);
   opacity: var(--opacity-muted);
 }
@@ -638,7 +638,7 @@
   align-items: center;
   gap: 6px;
   padding: 8px 10px;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text);
   background: var(--bg-icon);
   border-top: 1px solid var(--color-border);
@@ -668,7 +668,7 @@
   border-radius: 50%;
   background: oklch(20% 0.02 105 / 0.55);
   color: oklch(99% 0.005 105);
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   line-height: 1;
   cursor: pointer;
   display: flex;
@@ -691,7 +691,7 @@
     inset 0 1px 0 oklch(99% 0.005 105 / 0.6),
     0 1px 2px oklch(35% 0.03 105 / 0.06);
   color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   cursor: pointer;
   font-family: inherit;
   min-height: 132px;
@@ -712,7 +712,7 @@
 }
 
 .new-glyph {
-  font-size: 28px;
+  font-size: var(--font-size-3xl);
 }
 
 .pins-row-wide .pin-btn {
@@ -724,7 +724,7 @@
 .notif-empty {
   padding: 18px 14px;
   text-align: center;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-tertiary);
   background: var(--bg-surface);
   border: 1px dashed var(--color-border);
@@ -759,7 +759,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
+  font-size: var(--font-size-lg);
   flex-shrink: 0;
   overflow: hidden;
 }
@@ -779,14 +779,14 @@
 }
 
 .notif-body strong {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
 }
 
 .notif-body p {
   margin: 0;
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
   white-space: nowrap;
   overflow: hidden;
@@ -801,7 +801,7 @@
   background: transparent;
   border: none;
   color: var(--color-text-tertiary);
-  font-size: 18px;
+  font-size: var(--font-size-xl);
   cursor: pointer;
   padding: 4px 6px;
   flex-shrink: 0;
@@ -824,7 +824,7 @@
 }
 
 .blocker-origin {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
 }
 
@@ -835,7 +835,7 @@
 }
 
 .blocker-label {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
 }
 
@@ -881,7 +881,7 @@
 }
 
 .blocker-stats {
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-tertiary);
 }
 
diff --git a/ui/system/mobile/pebble_peek.css b/ui/system/mobile/pebble_peek.css
index 9b959c1..058dea7 100644
--- a/ui/system/mobile/pebble_peek.css
+++ b/ui/system/mobile/pebble_peek.css
@@ -43,7 +43,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
 }
@@ -71,7 +71,7 @@
 }
 
 .thumb.placeholder lucide-icon {
-  font-size: 28px;
+  font-size: var(--font-size-3xl);
   color: var(--color-text-tertiary);
 }
 
diff --git a/ui/system/mobile/pebble_radial.css b/ui/system/mobile/pebble_radial.css
index a0bac4a..f4b7457 100644
--- a/ui/system/mobile/pebble_radial.css
+++ b/ui/system/mobile/pebble_radial.css
@@ -44,7 +44,7 @@
   border-radius: 50%;
   background: var(--bg-menu);
   color: var(--color-text-menu);
-  font-size: 22px;
+  font-size: var(--font-size-2xl);
   cursor: pointer;
   box-shadow: 0 4px 14px var(--color-shadow-menu);
   display: flex;
diff --git a/ui/system/new_view.css b/ui/system/new_view.css
index c605953..972a0cb 100644
--- a/ui/system/new_view.css
+++ b/ui/system/new_view.css
@@ -67,7 +67,7 @@ body {
 .search-input {
   flex: 1;
   padding: var(--spacing-sm) var(--spacing-md);
-  font-size: 1em;
+  font-size: var(--font-size-lg);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--bg-webview);
diff --git a/ui/system/remote/index.css b/ui/system/remote/index.css
index 00b035a..18e599a 100644
--- a/ui/system/remote/index.css
+++ b/ui/system/remote/index.css
@@ -121,7 +121,7 @@ body {
 }
 
 .device-item-status {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   margin-top: 0.1em;
 }
@@ -195,7 +195,7 @@ body {
 
 .pin-error {
   color: var(--color-danger);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
 }
 
 .pin-actions {
@@ -256,7 +256,7 @@ body {
 
 #connected-name {
   flex: 1;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-secondary);
 }
@@ -297,7 +297,7 @@ body {
 }
 
 .np-artist {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   color: var(--color-text-secondary);
   margin-top: 0.1em;
 }
diff --git a/ui/system/search.css b/ui/system/search.css
index f63c3b4..098e894 100644
--- a/ui/system/search.css
+++ b/ui/system/search.css
@@ -66,7 +66,7 @@ h1 {
 .search-input {
   flex: 1;
   padding: var(--spacing-sm) var(--spacing-md);
-  font-size: 1.1em;
+  font-size: var(--font-size-xl);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--bg-webview);
diff --git a/ui/system/select_control.css b/ui/system/select_control.css
index cd3a5c0..707e09e 100644
--- a/ui/system/select_control.css
+++ b/ui/system/select_control.css
@@ -52,7 +52,7 @@ menu li.selected {
 
 .option-group {
   padding: var(--spacing-xs) var(--spacing-sm);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-tertiary);
   pointer-events: none;
diff --git a/ui/system/services/channels.js b/ui/system/services/channels.js
index 3518007..ac8430e 100644
--- a/ui/system/services/channels.js
+++ b/ui/system/services/channels.js
@@ -216,7 +216,7 @@ function ensureP2pDialogStyles() {
     }
     .p2p-open-dialog-title {
       margin: 0 0 8px;
-      font-size: 15px;
+      font-size: var(--font-size-md);
       font-weight: var(--font-weight-bold, 600);
       letter-spacing: -0.005em;
     }
@@ -229,7 +229,7 @@ function ensureP2pDialogStyles() {
       padding: 6px 10px;
       max-height: 4.5em;
       overflow-y: auto;
-      font-size: 11.5px;
+      font-size: var(--font-size-xs);
       line-height: 1.5;
       color: var(--color-text-secondary, oklch(40% 0.03 100));
       background: var(--bg-surface, oklch(96% 0.02 95 / 0.6));
@@ -245,7 +245,7 @@ function ensureP2pDialogStyles() {
     .p2p-open-dialog-btn {
       appearance: none;
       font: inherit;
-      font-size: 13px;
+      font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold, 600);
       padding: 7px 14px;
       border-radius: 8px 9px 8px 9px;
diff --git a/ui/system/task_chooser.js b/ui/system/task_chooser.js
index e7c0e8d..a0ac866 100644
--- a/ui/system/task_chooser.js
+++ b/ui/system/task_chooser.js
@@ -53,7 +53,7 @@ export class TaskChooser extends LitElement {
     }
 
     .title {
-      font-size: var(--font-size-menu);
+      font-size: var(--font-size-md);
       font-weight: var(--font-weight-bold);
       color: var(--color-text);
       margin-bottom: var(--spacing-md);
@@ -82,18 +82,18 @@ export class TaskChooser extends LitElement {
     }
 
     .provider-title {
-      font-size: var(--font-size-menu);
+      font-size: var(--font-size-md);
       font-weight: var(--font-weight-bold);
       color: var(--color-text);
     }
 
     .provider-description {
-      font-size: var(--font-size-sm);
+      font-size: var(--font-size-base);
       color: var(--color-text-secondary);
     }
 
     .provider-origin {
-      font-size: var(--font-size-xs);
+      font-size: var(--font-size-sm);
       color: var(--color-text-tertiary);
     }
 
@@ -106,7 +106,7 @@ export class TaskChooser extends LitElement {
       border-radius: var(--radius-sm);
       background: var(--bg-surface);
       color: var(--color-text);
-      font-size: var(--font-size-menu);
+      font-size: var(--font-size-md);
       font-family: var(--font-family-base);
       cursor: pointer;
       text-align: center;
@@ -122,7 +122,7 @@ export class TaskChooser extends LitElement {
       align-items: center;
       gap: var(--spacing-sm);
       padding: var(--spacing-sm);
-      font-size: var(--font-size-sm);
+      font-size: var(--font-size-base);
       color: var(--color-text-secondary);
       cursor: pointer;
     }
diff --git a/ui/system/toasts.css b/ui/system/toasts.css
index bd2bc26..7f77984 100644
--- a/ui/system/toasts.css
+++ b/ui/system/toasts.css
@@ -17,7 +17,7 @@
   background: var(--bg-surface);
   color: var(--color-text);
   font-family: var(--font-family-base);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   padding: var(--spacing-sm) var(--spacing-lg);
   margin: var(--spacing-xs);
   border: 1px solid var(--color-border);
diff --git a/ui/system/url_bar_overlay.css b/ui/system/url_bar_overlay.css
index 31e65d7..a34bdfb 100644
--- a/ui/system/url_bar_overlay.css
+++ b/ui/system/url_bar_overlay.css
@@ -52,7 +52,7 @@
 .search-input {
   flex: 1;
   padding: var(--spacing-sm) var(--spacing-md);
-  font-size: 1.1em;
+  font-size: var(--font-size-xl);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--bg-webview);
diff --git a/ui/system/web_view.css b/ui/system/web_view.css
index a93659d..14bfac5 100644
--- a/ui/system/web_view.css
+++ b/ui/system/web_view.css
@@ -143,7 +143,7 @@
   border-radius: 7px;
   background: var(--color-primary);
   color: var(--color-text-on-header);
-  font-size: 9px;
+  font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-bold);
   display: flex;
   align-items: center;
@@ -178,7 +178,7 @@
 :host .dialog-message {
   margin-bottom: var(--spacing-md);
   color: var(--color-text);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   line-height: 1.5;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -190,7 +190,7 @@
   margin-bottom: var(--spacing-md);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   background: var(--bg-surface);
   color: var(--color-text);
   box-sizing: border-box;
@@ -211,7 +211,7 @@
 :host .dialog-button {
   padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--radius-sm);
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   cursor: pointer;
   border: 1px solid var(--color-border);
@@ -258,7 +258,7 @@
 }
 
 :host .permission-title {
-  font-size: var(--font-size-menu);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   margin-bottom: var(--spacing-sm);
@@ -401,7 +401,7 @@
 
 :host .inline-provider-title {
   flex: 1;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
 }
@@ -409,7 +409,7 @@
 :host .inline-provider-close {
   background: none;
   border: none;
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-xl);
   cursor: pointer;
   padding: var(--spacing-xs) var(--spacing-sm);
   color: var(--color-text-secondary);
diff --git a/ui/themes/default/index.css b/ui/themes/default/index.css
index e98ffab..ab9cd1b 100644
--- a/ui/themes/default/index.css
+++ b/ui/themes/default/index.css
@@ -5,11 +5,18 @@
   --font-family-base: ReadexPro;
   --font-weight-normal: normal;
   --font-weight-bold: bolder;
-  --font-size-xl: 1.5em;
-  --font-size-lg: 1.15em;
-  --font-size-menu: 0.9em;
-  --font-size-sm: 0.85em;
-  --font-size-xs: 0.75em;
+  /* Fixed rem type scale on the 16px UA base (no root font-size is set,
+     so the chrome still follows the platform default). Dense small end
+     (2xs..base) for chrome and popovers; larger steps for headings. */
+  --font-size-2xs: 0.625rem; /* 10px : meta, timestamps, dense labels */
+  --font-size-xs: 0.6875rem; /* 11px : dense secondary */
+  --font-size-sm: 0.75rem; /* 12px : list items, dense body */
+  --font-size-base: 0.8125rem; /* 13px : default UI text */
+  --font-size-md: 0.875rem; /* 14px : comfortable / emphasis */
+  --font-size-lg: 1rem; /* 16px : prominent */
+  --font-size-xl: 1.125rem; /* 18px : section headings */
+  --font-size-2xl: 1.375rem; /* 22px : large headings */
+  --font-size-3xl: 1.75rem; /* 28px : display */
 
   /* ===== Backgrounds ===== */
   --bg-main: linear-gradient(
diff --git a/ui/themes/lcars/index.css b/ui/themes/lcars/index.css
index d873994..6f35614 100644
--- a/ui/themes/lcars/index.css
+++ b/ui/themes/lcars/index.css
@@ -5,11 +5,18 @@
   --font-family-base: ReadexPro;
   --font-weight-normal: normal;
   --font-weight-bold: bold;
-  --font-size-menu: 0.9em;
-  --font-size-sm: 0.85em;
-  --font-size-xs: 0.75em;
-  --font-size-lg: 1.15em;
-  --font-size-xl: 1.5em;
+  /* Fixed rem type scale on the 16px UA base (no root font-size is set,
+     so the chrome still follows the platform default). Dense small end
+     (2xs..base) for chrome and popovers; larger steps for headings. */
+  --font-size-2xs: 0.625rem; /* 10px : meta, timestamps, dense labels */
+  --font-size-xs: 0.6875rem; /* 11px : dense secondary */
+  --font-size-sm: 0.75rem; /* 12px : list items, dense body */
+  --font-size-base: 0.8125rem; /* 13px : default UI text */
+  --font-size-md: 0.875rem; /* 14px : comfortable / emphasis */
+  --font-size-lg: 1rem; /* 16px : prominent */
+  --font-size-xl: 1.125rem; /* 18px : section headings */
+  --font-size-2xl: 1.375rem; /* 22px : large headings */
+  --font-size-3xl: 1.75rem; /* 28px : display */
 
   /* ===== Backgrounds ===== */
   --bg-main: #000000;
diff --git a/ui/themes/meadow/index.css b/ui/themes/meadow/index.css
index 4d80641..4afa11e 100644
--- a/ui/themes/meadow/index.css
+++ b/ui/themes/meadow/index.css
@@ -4,11 +4,18 @@
   --font-family-base: ReadexPro;
   --font-weight-normal: normal;
   --font-weight-bold: 600;
-  --font-size-menu: 0.9em;
-  --font-size-sm: 0.85em;
-  --font-size-xs: 0.75em;
-  --font-size-lg: 1.15em;
-  --font-size-xl: 1.5em;
+  /* Fixed rem type scale on the 16px UA base (no root font-size is set,
+     so the chrome still follows the platform default). Dense small end
+     (2xs..base) for chrome and popovers; larger steps for headings. */
+  --font-size-2xs: 0.625rem; /* 10px : meta, timestamps, dense labels */
+  --font-size-xs: 0.6875rem; /* 11px : dense secondary */
+  --font-size-sm: 0.75rem; /* 12px : list items, dense body */
+  --font-size-base: 0.8125rem; /* 13px : default UI text */
+  --font-size-md: 0.875rem; /* 14px : comfortable / emphasis */
+  --font-size-lg: 1rem; /* 16px : prominent */
+  --font-size-xl: 1.125rem; /* 18px : section headings */
+  --font-size-2xl: 1.375rem; /* 22px : large headings */
+  --font-size-3xl: 1.75rem; /* 28px : display */
 
   /* ===== Backgrounds ===== */
   --bg-main: linear-gradient(
diff --git a/ui/themes/ocean/index.css b/ui/themes/ocean/index.css
index 81fc196..1f30bd2 100644
--- a/ui/themes/ocean/index.css
+++ b/ui/themes/ocean/index.css
@@ -9,11 +9,18 @@
   --font-family-base: ReadexPro;
   --font-weight-normal: normal;
   --font-weight-bold: 600;
-  --font-size-xl: 1.5em;
-  --font-size-lg: 1.15em;
-  --font-size-menu: 0.9em;
-  --font-size-sm: 0.85em;
-  --font-size-xs: 0.75em;
+  /* Fixed rem type scale on the 16px UA base (no root font-size is set,
+     so the chrome still follows the platform default). Dense small end
+     (2xs..base) for chrome and popovers; larger steps for headings. */
+  --font-size-2xs: 0.625rem; /* 10px : meta, timestamps, dense labels */
+  --font-size-xs: 0.6875rem; /* 11px : dense secondary */
+  --font-size-sm: 0.75rem; /* 12px : list items, dense body */
+  --font-size-base: 0.8125rem; /* 13px : default UI text */
+  --font-size-md: 0.875rem; /* 14px : comfortable / emphasis */
+  --font-size-lg: 1rem; /* 16px : prominent */
+  --font-size-xl: 1.125rem; /* 18px : section headings */
+  --font-size-2xl: 1.375rem; /* 22px : large headings */
+  --font-size-3xl: 1.75rem; /* 28px : display */
 
   /* ===== Backgrounds ===== */
   /* The shore, seen top-down: turquoise shallows washing onto warm sand. */
diff --git a/ui/themes/winamp/index.css b/ui/themes/winamp/index.css
index 934ad9c..a0bfc9b 100644
--- a/ui/themes/winamp/index.css
+++ b/ui/themes/winamp/index.css
@@ -5,11 +5,18 @@
   --font-family-base: ReadexPro;
   --font-weight-normal: normal;
   --font-weight-bold: bold;
-  --font-size-menu: 0.9em;
-  --font-size-sm: 0.85em;
-  --font-size-xs: 0.75em;
-  --font-size-lg: 1.15em;
-  --font-size-xl: 1.5em;
+  /* Fixed rem type scale on the 16px UA base (no root font-size is set,
+     so the chrome still follows the platform default). Dense small end
+     (2xs..base) for chrome and popovers; larger steps for headings. */
+  --font-size-2xs: 0.625rem; /* 10px : meta, timestamps, dense labels */
+  --font-size-xs: 0.6875rem; /* 11px : dense secondary */
+  --font-size-sm: 0.75rem; /* 12px : list items, dense body */
+  --font-size-base: 0.8125rem; /* 13px : default UI text */
+  --font-size-md: 0.875rem; /* 14px : comfortable / emphasis */
+  --font-size-lg: 1rem; /* 16px : prominent */
+  --font-size-xl: 1.125rem; /* 18px : section headings */
+  --font-size-2xl: 1.375rem; /* 22px : large headings */
+  --font-size-3xl: 1.75rem; /* 28px : display */
 
   /* ===== Backgrounds ===== */
   --bg-main: #232323;