diff --git a/fakemui/components/_tokens.scss b/fakemui/components/_tokens.scss
index d3362a36f..fa8054299 100644
--- a/fakemui/components/_tokens.scss
+++ b/fakemui/components/_tokens.scss
@@ -63,6 +63,36 @@ $inverse-primary: var(--mat-sys-inverse-primary);
 $scrim: var(--mat-sys-scrim);
 $shadow: var(--mat-sys-shadow);
 
+// ============================================
+// Extended Semantic Colors (not in M3 spec)
+// ============================================
+// M3 only defines error. We extend with success/warning/info.
+// These follow M3 naming conventions.
+
+// Success (green)
+$success: var(--color-success);
+$on-success: var(--color-on-success);
+$success-container: var(--color-success-container);
+$on-success-container: var(--color-on-success-container);
+
+// Warning (amber/orange)
+$warning: var(--color-warning);
+$on-warning: var(--color-on-warning);
+$warning-container: var(--color-warning-container);
+$on-warning-container: var(--color-on-warning-container);
+
+// Info (blue)
+$info: var(--color-info);
+$on-info: var(--color-on-info);
+$info-container: var(--color-info-container);
+$on-info-container: var(--color-on-info-container);
+
+// Search/Find highlight (yellow)
+$search-highlight: var(--color-search-highlight);
+$on-search-highlight: var(--color-on-search-highlight);
+$search-highlight-current: var(--color-search-highlight-current);
+$search-highlight-ring: var(--color-search-highlight-ring);
+
 // ============================================
 // Shape Tokens (Corner Radius)
 // ============================================
@@ -103,6 +133,9 @@ $elevation-level5: var(--mat-sys-level5);
 // Typography Tokens
 // ============================================
 
+// Monospace font for code
+$font-mono: var(--font-mono);
+
 // Display
 $display-large-font: var(--mat-sys-display-large-font);
 $display-large-size: var(--mat-sys-display-large-size);
diff --git a/fakemui/scss/m3-base.css b/fakemui/scss/m3-base.css
index 38e951f36..08d8b1e76 100644
--- a/fakemui/scss/m3-base.css
+++ b/fakemui/scss/m3-base.css
@@ -212,17 +212,29 @@
 /* Background Colors */
 .bg-destructive { background-color: var(--mat-sys-error); }
 .bg-destructive\/10 { background-color: color-mix(in srgb, var(--mat-sys-error) 10%, transparent); }
-.bg-green-600 { background-color: #16a34a; }
-.bg-green-600\/10 { background-color: rgba(22, 163, 74, 0.1); }
+.bg-success { background-color: var(--color-success); }
+.bg-success\/10 { background-color: var(--color-success-container); }
+.bg-green-600 { background-color: var(--color-success); }
+.bg-green-600\/10 { background-color: var(--color-success-container); }
+.bg-warning { background-color: var(--color-warning); }
+.bg-warning\/10 { background-color: var(--color-warning-container); }
+.bg-info { background-color: var(--color-info); }
+.bg-info\/10 { background-color: var(--color-info-container); }
 
 /* Text Colors */
 .text-destructive { color: var(--mat-sys-error); }
-.text-green-600 { color: #16a34a; }
+.text-success { color: var(--color-success); }
+.text-green-600 { color: var(--color-success); }
+.text-warning { color: var(--color-warning); }
+.text-info { color: var(--color-info); }
 
 /* Border Utilities */
 .border { border: 1px solid var(--mat-sys-outline); }
 .border-destructive { border-color: var(--mat-sys-error); }
-.border-green-600 { border-color: #16a34a; }
+.border-success { border-color: var(--color-success); }
+.border-green-600 { border-color: var(--color-success); }
+.border-warning { border-color: var(--color-warning); }
+.border-info { border-color: var(--color-info); }
 
 /* Grid Utilities */
 .grid-cols-1 { grid-template-columns: 1fr; }
diff --git a/fakemui/styles/TreeView.module.scss b/fakemui/styles/TreeView.module.scss
index b343c79aa..78f0c5c7d 100644
--- a/fakemui/styles/TreeView.module.scss
+++ b/fakemui/styles/TreeView.module.scss
@@ -40,7 +40,7 @@
   }
 
   &.disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     cursor: not-allowed;
   }
 
diff --git a/fakemui/styles/_variables.scss b/fakemui/styles/_variables.scss
index 172f0140e..d32f407ad 100644
--- a/fakemui/styles/_variables.scss
+++ b/fakemui/styles/_variables.scss
@@ -57,6 +57,12 @@
   --color-info-container: color-mix(in srgb, #2196f3 12%, var(--mat-sys-surface));
   --color-on-info-container: #0d47a1;
 
+  // Search/Find highlight (yellow - universal standard)
+  --color-search-highlight: #ffeb3b;
+  --color-on-search-highlight: #000000;
+  --color-search-highlight-current: #fdd835;
+  --color-search-highlight-ring: #fbc02d;
+
   // Error (from M3)
   --color-error: var(--mat-sys-error);
   --color-on-error: var(--mat-sys-on-error);
@@ -94,11 +100,21 @@
   --shadow-lg: var(--mat-sys-level3);
   --shadow-xl: var(--mat-sys-level4);
 
+  // ============================================
+  // State Layer & Disabled Opacities (M3 spec)
+  // ============================================
+  --state-hover-opacity: 0.08;
+  --state-focus-opacity: 0.12;
+  --state-pressed-opacity: 0.12;
+  --state-dragged-opacity: 0.16;
+  --disabled-container-opacity: 0.12;
+  --disabled-content-opacity: 0.38;
+
   // ============================================
   // Legacy Typography → M3 Type Scale
   // ============================================
   --font-family: var(--mat-sys-body-large-font);
-  --font-mono: var(--mat-sys-body-large-font);
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
 
   --font-size-xs: var(--mat-sys-label-small-size);
   --font-size-sm: var(--mat-sys-body-small-size);
@@ -125,11 +141,20 @@
   --transition-slow: var(--mat-sys-motion-duration-long2) var(--mat-sys-motion-easing-standard);
 
   // ============================================
-  // Z-index Layers (unchanged)
+  // Z-index Layers (M3-aligned stacking order)
   // ============================================
-  --z-dropdown: 100;
-  --z-modal: 200;
-  --z-toast: 300;
+  // Local stacking (within components)
+  --z-local: 1;
+  --z-local-elevated: 10;
+
+  // Global stacking (overlays)
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-drawer: 1200;
+  --z-modal: 1300;
+  --z-snackbar: 1400;
+  --z-tooltip: 1500;
+  --z-overlay-max: 9999;
 }
 
 // ============================================
diff --git a/fakemui/styles/atoms/_alert.scss b/fakemui/styles/atoms/_alert.scss
index 52c6c61b7..edb19712d 100644
--- a/fakemui/styles/atoms/_alert.scss
+++ b/fakemui/styles/atoms/_alert.scss
@@ -93,22 +93,22 @@
 
 // Warning
 .alert--warning {
-  background: color-mix(in srgb, #ff9800 12%, var(--mat-sys-surface));
+  background: var(--color-warning-container);
   color: var(--mat-sys-on-surface);
 }
 
 .alert--warning .alert__icon {
-  color: #e65100;
+  color: var(--color-on-warning-container);
 }
 
 // Success
 .alert--success {
-  background: color-mix(in srgb, #4caf50 12%, var(--mat-sys-surface));
+  background: var(--color-success-container);
   color: var(--mat-sys-on-surface);
 }
 
 .alert--success .alert__icon {
-  color: #2e7d32;
+  color: var(--color-on-success-container);
 }
 
 // Info (default)
@@ -135,11 +135,11 @@
 }
 
 .alert--outlined.alert--warning {
-  border-color: #ff9800;
+  border-color: var(--color-warning);
 }
 
 .alert--outlined.alert--success {
-  border-color: #4caf50;
+  border-color: var(--color-success);
 }
 
 .alert--outlined.alert--info {
@@ -160,21 +160,21 @@
 }
 
 .alert--filled.alert--warning {
-  background: #ed6c02;
-  color: #fff;
+  background: var(--color-warning);
+  color: var(--color-on-warning);
 }
 
 .alert--filled.alert--warning .alert__icon {
-  color: #fff;
+  color: var(--color-on-warning);
 }
 
 .alert--filled.alert--success {
-  background: #2e7d32;
-  color: #fff;
+  background: var(--color-success);
+  color: var(--color-on-success);
 }
 
 .alert--filled.alert--success .alert__icon {
-  color: #fff;
+  color: var(--color-on-success);
 }
 
 .alert--filled.alert--info {
diff --git a/fakemui/styles/atoms/_avatar.scss b/fakemui/styles/atoms/_avatar.scss
index 512db8422..6447c278a 100644
--- a/fakemui/styles/atoms/_avatar.scss
+++ b/fakemui/styles/atoms/_avatar.scss
@@ -177,7 +177,7 @@
 }
 
 .avatar__status--online {
-  background: #4caf50;
+  background: var(--color-success);
 }
 
 .avatar__status--busy {
@@ -185,5 +185,5 @@
 }
 
 .avatar__status--away {
-  background: #ff9800;
+  background: var(--color-warning);
 }
diff --git a/fakemui/styles/atoms/_badge.scss b/fakemui/styles/atoms/_badge.scss
index ce61dc81a..e44808b09 100644
--- a/fakemui/styles/atoms/_badge.scss
+++ b/fakemui/styles/atoms/_badge.scss
@@ -16,8 +16,8 @@
   background: var(--mat-sys-error);
   color: var(--mat-sys-on-error);
   font-family: var(--mat-sys-label-small-font);
-  font-size: 11px;
-  font-weight: 500;
+  font-size: var(--mat-sys-label-small-size);
+  font-weight: var(--mat-sys-label-small-weight);
   line-height: 1;
   white-space: nowrap;
 }
@@ -91,13 +91,18 @@
 }
 
 .badge--success {
-  background: #4caf50;
-  color: #fff;
+  background: var(--color-success);
+  color: var(--color-on-success);
 }
 
 .badge--warning {
-  background: #ff9800;
-  color: #000;
+  background: var(--color-warning);
+  color: var(--color-on-warning);
+}
+
+.badge--info {
+  background: var(--color-info);
+  color: var(--color-on-info);
 }
 
 .badge--error {
diff --git a/fakemui/styles/atoms/_blockquote.scss b/fakemui/styles/atoms/_blockquote.scss
index 9f18ba955..d1d8e0596 100644
--- a/fakemui/styles/atoms/_blockquote.scss
+++ b/fakemui/styles/atoms/_blockquote.scss
@@ -38,13 +38,18 @@
 }
 
 .blockquote--success {
-  border-left-color: #4caf50;
-  background: color-mix(in srgb, #4caf50 8%, var(--mat-sys-surface));
+  border-left-color: var(--color-success);
+  background: var(--color-success-container);
 }
 
 .blockquote--warning {
-  border-left-color: #ff9800;
-  background: color-mix(in srgb, #ff9800 8%, var(--mat-sys-surface));
+  border-left-color: var(--color-warning);
+  background: var(--color-warning-container);
+}
+
+.blockquote--info {
+  border-left-color: var(--color-info);
+  background: var(--color-info-container);
 }
 
 // Outlined variant
diff --git a/fakemui/styles/atoms/_button.scss b/fakemui/styles/atoms/_button.scss
index f180a864f..59a6a1135 100644
--- a/fakemui/styles/atoms/_button.scss
+++ b/fakemui/styles/atoms/_button.scss
@@ -202,7 +202,7 @@
 .btn--sm {
   height: 32px;
   padding: 0 16px;
-  font-size: 0.75rem;
+  font-size: var(--mat-sys-label-small-size);
 }
 
 .btn--md {
@@ -213,7 +213,7 @@
 .btn--lg {
   height: 48px;
   padding: 0 32px;
-  font-size: 1rem;
+  font-size: var(--mat-sys-body-large-size);
 }
 
 // ============================================
diff --git a/fakemui/styles/atoms/_chip.scss b/fakemui/styles/atoms/_chip.scss
index ee221cd25..55681ca6c 100644
--- a/fakemui/styles/atoms/_chip.scss
+++ b/fakemui/styles/atoms/_chip.scss
@@ -106,13 +106,18 @@
 }
 
 .chip--success {
-  background: color-mix(in srgb, #4caf50 20%, transparent);
-  color: #2e7d32;
+  background: var(--color-success-container);
+  color: var(--color-on-success-container);
 }
 
 .chip--warning {
-  background: color-mix(in srgb, #ff9800 20%, transparent);
-  color: #e65100;
+  background: var(--color-warning-container);
+  color: var(--color-on-warning-container);
+}
+
+.chip--info {
+  background: var(--color-info-container);
+  color: var(--color-on-info-container);
 }
 
 .chip--error {
@@ -196,7 +201,7 @@
 
 .chip:disabled,
 .chip--disabled {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
diff --git a/fakemui/styles/atoms/_code-block.scss b/fakemui/styles/atoms/_code-block.scss
index 100d4eccb..c21f46ce1 100644
--- a/fakemui/styles/atoms/_code-block.scss
+++ b/fakemui/styles/atoms/_code-block.scss
@@ -9,8 +9,8 @@
   border-radius: var(--mat-sys-corner-medium);
   overflow-x: auto;
   margin-bottom: 16px;
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
-  font-size: 0.875rem;
+  font-family: var(--font-mono);
+  font-size: var(--mat-sys-body-small-size);
   line-height: 1.6;
   color: var(--mat-sys-on-surface);
 }
@@ -75,7 +75,7 @@
   padding: 0 16px;
   color: var(--mat-sys-on-surface-variant);
   opacity: 0.5;
-  font-size: 0.75rem;
+  font-size: var(--mat-sys-label-small-size);
   text-align: right;
   user-select: none;
   border-right: 1px solid var(--mat-sys-outline-variant);
diff --git a/fakemui/styles/atoms/_code-inline.scss b/fakemui/styles/atoms/_code-inline.scss
index b36878ec2..d86fe6684 100644
--- a/fakemui/styles/atoms/_code-inline.scss
+++ b/fakemui/styles/atoms/_code-inline.scss
@@ -4,7 +4,7 @@
 
 // Base inline code
 .code-inline {
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875em;
   background: var(--mat-sys-surface-container-high);
   color: var(--mat-sys-on-surface);
@@ -33,17 +33,27 @@
 }
 
 .code-inline--function {
-  color: #ff9800;
+  color: var(--color-warning);
 }
 
 .code-inline--error {
   color: var(--mat-sys-error);
-  background: color-mix(in srgb, var(--mat-sys-error) 8%, var(--mat-sys-surface));
+  background: var(--color-error-container);
 }
 
 .code-inline--success {
-  color: #4caf50;
-  background: color-mix(in srgb, #4caf50 8%, var(--mat-sys-surface));
+  color: var(--color-success);
+  background: var(--color-success-container);
+}
+
+.code-inline--warning {
+  color: var(--color-warning);
+  background: var(--color-warning-container);
+}
+
+.code-inline--info {
+  color: var(--color-info);
+  background: var(--color-info-container);
 }
 
 // Selectable variant (clickable)
diff --git a/fakemui/styles/atoms/_code-preview.scss b/fakemui/styles/atoms/_code-preview.scss
index 204ab2d61..3f3dda4e4 100644
--- a/fakemui/styles/atoms/_code-preview.scss
+++ b/fakemui/styles/atoms/_code-preview.scss
@@ -8,8 +8,8 @@
   background: var(--mat-sys-surface-container);
   border: 1px solid var(--mat-sys-outline-variant);
   border-radius: var(--mat-sys-corner-medium);
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: var(--mat-sys-body-small-size);
   line-height: 1.5;
   overflow: hidden;
 }
@@ -25,7 +25,7 @@
 .code-line-num {
   color: var(--mat-sys-on-surface-variant);
   opacity: 0.5;
-  font-size: 0.7rem;
+  font-size: var(--mat-sys-label-small-size);
   min-width: 24px;
   text-align: right;
   user-select: none;
@@ -42,16 +42,16 @@
 
 // Diff added line
 .code-line--added {
-  background: color-mix(in srgb, #4caf50 12%, transparent);
+  background: var(--color-success-container);
 }
 
 .code-line--added .code-line-content {
-  color: #4caf50;
+  color: var(--color-success);
 }
 
 .code-line--added::before {
   content: '+';
-  color: #4caf50;
+  color: var(--color-success);
   font-weight: 600;
   margin-right: 8px;
 }
@@ -74,11 +74,11 @@
 
 // Diff modified line
 .code-line--modified {
-  background: color-mix(in srgb, #ff9800 12%, transparent);
+  background: var(--color-warning-container);
 }
 
 .code-line--modified .code-line-content {
-  color: #ff9800;
+  color: var(--color-warning);
 }
 
 // Context line (unchanged)
@@ -119,7 +119,7 @@
 }
 
 .code-preview-stats--added {
-  color: #4caf50;
+  color: var(--color-success);
 }
 
 .code-preview-stats--removed {
diff --git a/fakemui/styles/atoms/_dialog.scss b/fakemui/styles/atoms/_dialog.scss
index a7a411ed0..e4ca7f0e0 100644
--- a/fakemui/styles/atoms/_dialog.scss
+++ b/fakemui/styles/atoms/_dialog.scss
@@ -12,7 +12,7 @@
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
-  z-index: 1000;
+  z-index: var(--z-modal);
   animation: dialog-fade-in var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-emphasized-decelerate);
 }
 
diff --git a/fakemui/styles/atoms/_error-state.scss b/fakemui/styles/atoms/_error-state.scss
index 2c56f2edd..7b8202e16 100644
--- a/fakemui/styles/atoms/_error-state.scss
+++ b/fakemui/styles/atoms/_error-state.scss
@@ -43,8 +43,8 @@
 
 // Error code/details
 .error-state-code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-size: var(--mat-sys-label-small-size);
   color: var(--mat-sys-error);
   background: color-mix(in srgb, var(--mat-sys-error) 8%, transparent);
   padding: 8px 16px;
diff --git a/fakemui/styles/atoms/_form.scss b/fakemui/styles/atoms/_form.scss
index f155c2d02..a38566254 100644
--- a/fakemui/styles/atoms/_form.scss
+++ b/fakemui/styles/atoms/_form.scss
@@ -13,10 +13,10 @@
 }
 
 .form-label {
-  font-family: var(--mat-sys-body-medium-font);
-  font-size: var(--mat-sys-body-medium-size);
-  font-weight: 500;
-  line-height: var(--mat-sys-body-medium-line-height);
+  font-family: var(--mat-sys-label-large-font);
+  font-size: var(--mat-sys-label-large-size);
+  font-weight: var(--mat-sys-label-large-weight);
+  line-height: var(--mat-sys-label-large-line-height);
   color: var(--mat-sys-on-surface-variant);
 }
 
@@ -62,9 +62,9 @@
 }
 
 .input:disabled {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   cursor: not-allowed;
-  border-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
+  border-color: color-mix(in srgb, var(--mat-sys-on-surface) var(--disabled-container-opacity), transparent);
 }
 
 .input::placeholder {
@@ -129,7 +129,7 @@
 }
 
 .textarea:disabled {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   cursor: not-allowed;
 }
 
@@ -182,7 +182,7 @@
 }
 
 .select:disabled {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   cursor: not-allowed;
 }
 
@@ -241,7 +241,7 @@
 }
 
 .checkbox__input:disabled + .checkbox__box {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   cursor: not-allowed;
 }
 
@@ -306,7 +306,7 @@
 }
 
 .radio__input:disabled + .radio__circle {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   cursor: not-allowed;
 }
 
@@ -381,7 +381,7 @@
 }
 
 .switch__input:disabled + .switch__track {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   cursor: not-allowed;
 }
 
diff --git a/fakemui/styles/atoms/_grid.scss b/fakemui/styles/atoms/_grid.scss
index 70ffddebd..bd668ff68 100644
--- a/fakemui/styles/atoms/_grid.scss
+++ b/fakemui/styles/atoms/_grid.scss
@@ -2,6 +2,8 @@
 // ==============================
 // Flat selectors for responsive grid layouts using M3 spacing
 
+@use '../mixins/responsive' as *;
+
 // Base grid
 .grid {
   display: grid;
@@ -100,8 +102,8 @@
   margin-bottom: 16px;
 }
 
-// Responsive grid breakpoints
-@media (max-width: 768px) {
+// Responsive grid breakpoints (M3 window size classes)
+@include compact {
   .grid-cols-2,
   .grid-cols-3,
   .grid-cols-4,
@@ -115,7 +117,7 @@
   }
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
+@include medium {
   .grid-cols-4,
   .grid-cols-5,
   .grid-cols-6 {
diff --git a/fakemui/styles/atoms/_highlight.scss b/fakemui/styles/atoms/_highlight.scss
index ce115aeca..70e49f6e3 100644
--- a/fakemui/styles/atoms/_highlight.scss
+++ b/fakemui/styles/atoms/_highlight.scss
@@ -22,23 +22,23 @@
 }
 
 .highlight--success {
-  background: color-mix(in srgb, #4caf50 20%, var(--mat-sys-surface));
-  color: #2e7d32;
+  background: var(--color-success-container);
+  color: var(--color-on-success-container);
 }
 
 .highlight--warning {
-  background: color-mix(in srgb, #ff9800 20%, var(--mat-sys-surface));
-  color: #e65100;
+  background: var(--color-warning-container);
+  color: var(--color-on-warning-container);
 }
 
 .highlight--error {
-  background: var(--mat-sys-error-container);
-  color: var(--mat-sys-on-error-container);
+  background: var(--color-error-container);
+  color: var(--color-on-error-container);
 }
 
 .highlight--info {
-  background: color-mix(in srgb, #2196f3 20%, var(--mat-sys-surface));
-  color: #0d47a1;
+  background: var(--color-info-container);
+  color: var(--color-on-info-container);
 }
 
 // Subtle variant (lower contrast)
@@ -55,16 +55,16 @@
 
 // Search result highlight
 .highlight--search {
-  background: color-mix(in srgb, #ffeb3b 50%, transparent);
+  background: color-mix(in srgb, var(--color-search-highlight) 50%, transparent);
   color: inherit;
-  box-shadow: 0 0 0 2px color-mix(in srgb, #ffeb3b 50%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-search-highlight) 50%, transparent);
 }
 
 // Current/active search result
 .highlight--search-current {
-  background: #ffeb3b;
-  color: #000;
-  box-shadow: 0 0 0 2px #fbc02d;
+  background: var(--color-search-highlight-current);
+  color: var(--color-on-search-highlight);
+  box-shadow: 0 0 0 2px var(--color-search-highlight-ring);
 }
 
 // Selection highlight (for text selection styling)
@@ -75,7 +75,7 @@
 // Code/syntax highlighting markers
 .highlight--keyword {
   color: var(--mat-sys-primary);
-  font-weight: 500;
+  font-weight: var(--mat-sys-label-large-weight);
 }
 
 .highlight--string {
diff --git a/fakemui/styles/atoms/_icon.scss b/fakemui/styles/atoms/_icon.scss
index fdca29ed3..079744229 100644
--- a/fakemui/styles/atoms/_icon.scss
+++ b/fakemui/styles/atoms/_icon.scss
@@ -68,11 +68,15 @@
 }
 
 .icon--success {
-  color: #4caf50;
+  color: var(--color-success);
 }
 
 .icon--warning {
-  color: #ff9800;
+  color: var(--color-warning);
+}
+
+.icon--info {
+  color: var(--color-info);
 }
 
 .icon--on-surface {
diff --git a/fakemui/styles/atoms/_label.scss b/fakemui/styles/atoms/_label.scss
index a98d62aa5..dd757fd69 100644
--- a/fakemui/styles/atoms/_label.scss
+++ b/fakemui/styles/atoms/_label.scss
@@ -32,7 +32,7 @@
 // Uppercase variant (for section headers, metadata keys)
 .label--uppercase {
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: var(--mat-sys-label-small-tracking);
 }
 
 // Color variants
@@ -49,11 +49,15 @@
 }
 
 .label--success {
-  color: #4caf50;
+  color: var(--color-success);
 }
 
 .label--warning {
-  color: #ff9800;
+  color: var(--color-warning);
+}
+
+.label--info {
+  color: var(--color-info);
 }
 
 .label--on-surface {
diff --git a/fakemui/styles/atoms/_list.scss b/fakemui/styles/atoms/_list.scss
index 444cc4274..26bc99014 100644
--- a/fakemui/styles/atoms/_list.scss
+++ b/fakemui/styles/atoms/_list.scss
@@ -78,7 +78,7 @@
 
 // Disabled list item
 .list-item--disabled {
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
   pointer-events: none;
 }
 
@@ -239,7 +239,7 @@
 }
 
 .list-item__status--success {
-  background: #4caf50;
+  background: var(--color-success);
 }
 
 .list-item__status--error {
@@ -247,7 +247,11 @@
 }
 
 .list-item__status--warning {
-  background: #ff9800;
+  background: var(--color-warning);
+}
+
+.list-item__status--info {
+  background: var(--color-info);
 }
 
 .list-item__status--pending {
diff --git a/fakemui/styles/atoms/_loading-state.scss b/fakemui/styles/atoms/_loading-state.scss
index 415d14823..8bb7c758d 100644
--- a/fakemui/styles/atoms/_loading-state.scss
+++ b/fakemui/styles/atoms/_loading-state.scss
@@ -59,7 +59,7 @@
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--mat-sys-surface) 80%, transparent);
-  z-index: 10;
+  z-index: var(--z-local-elevated);
   backdrop-filter: blur(2px);
 }
 
@@ -68,7 +68,7 @@
   position: fixed;
   inset: 0;
   background: var(--mat-sys-surface);
-  z-index: 9999;
+  z-index: var(--z-overlay-max);
 }
 
 // Skeleton loading placeholder
diff --git a/fakemui/styles/atoms/_markdown.scss b/fakemui/styles/atoms/_markdown.scss
index 491bdf96a..317afeaab 100644
--- a/fakemui/styles/atoms/_markdown.scss
+++ b/fakemui/styles/atoms/_markdown.scss
@@ -4,7 +4,7 @@
 
 // Inline code
 .markdown code {
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.875em;
   background: var(--mat-sys-surface-container-high);
   color: var(--mat-sys-on-surface);
@@ -24,7 +24,7 @@
 .markdown pre code {
   background: transparent;
   padding: 0;
-  font-size: 0.875rem;
+  font-size: var(--mat-sys-body-small-size);
   line-height: 1.6;
 }
 
diff --git a/fakemui/styles/atoms/_panel.scss b/fakemui/styles/atoms/_panel.scss
index d9783d968..7075ccd9d 100644
--- a/fakemui/styles/atoms/_panel.scss
+++ b/fakemui/styles/atoms/_panel.scss
@@ -25,28 +25,28 @@
   position: fixed;
   bottom: 16px;
   right: 16px;
-  z-index: 1000;
+  z-index: var(--z-dropdown);
 }
 
 .panel--fixed-bl {
   position: fixed;
   bottom: 16px;
   left: 16px;
-  z-index: 1000;
+  z-index: var(--z-dropdown);
 }
 
 .panel--fixed-tr {
   position: fixed;
   top: 16px;
   right: 16px;
-  z-index: 1000;
+  z-index: var(--z-dropdown);
 }
 
 .panel--fixed-tl {
   position: fixed;
   top: 16px;
   left: 16px;
-  z-index: 1000;
+  z-index: var(--z-dropdown);
 }
 
 // Panel header
diff --git a/fakemui/styles/atoms/_progress.scss b/fakemui/styles/atoms/_progress.scss
index 5b353781c..164997ffa 100644
--- a/fakemui/styles/atoms/_progress.scss
+++ b/fakemui/styles/atoms/_progress.scss
@@ -39,11 +39,15 @@
 }
 
 .progress--success .progress-bar {
-  background: #4caf50;
+  background: var(--color-success);
 }
 
 .progress--warning .progress-bar {
-  background: #ff9800;
+  background: var(--color-warning);
+}
+
+.progress--info .progress-bar {
+  background: var(--color-info);
 }
 
 .progress--error .progress-bar {
diff --git a/fakemui/styles/atoms/_section-title.scss b/fakemui/styles/atoms/_section-title.scss
index 101cd06dc..139f925cf 100644
--- a/fakemui/styles/atoms/_section-title.scss
+++ b/fakemui/styles/atoms/_section-title.scss
@@ -94,7 +94,7 @@
 // Uppercase variant
 .section-title--uppercase {
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: var(--mat-sys-label-small-tracking);
 }
 
 // With action link
diff --git a/fakemui/styles/atoms/_snackbar.scss b/fakemui/styles/atoms/_snackbar.scss
index 4825527e0..5b71aadb3 100644
--- a/fakemui/styles/atoms/_snackbar.scss
+++ b/fakemui/styles/atoms/_snackbar.scss
@@ -6,7 +6,7 @@
 // Snackbar container
 .snackbar {
   position: fixed;
-  z-index: 1400;
+  z-index: var(--z-snackbar);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -180,7 +180,7 @@
 // Stacked snackbars
 .snackbar-container {
   position: fixed;
-  z-index: 1400;
+  z-index: var(--z-snackbar);
   display: flex;
   flex-direction: column;
   gap: 8px;
diff --git a/fakemui/styles/atoms/_stat-badge.scss b/fakemui/styles/atoms/_stat-badge.scss
index 98a5007b7..27833a0be 100644
--- a/fakemui/styles/atoms/_stat-badge.scss
+++ b/fakemui/styles/atoms/_stat-badge.scss
@@ -20,28 +20,28 @@
 
 // Status variants
 .stat-badge--pending {
-  background: color-mix(in srgb, #ff9800 20%, var(--mat-sys-surface));
-  color: #e65100;
+  background: var(--color-warning-container);
+  color: var(--color-on-warning-container);
 }
 
 .stat-badge--success {
-  background: color-mix(in srgb, #4caf50 20%, var(--mat-sys-surface));
-  color: #2e7d32;
+  background: var(--color-success-container);
+  color: var(--color-on-success-container);
 }
 
 .stat-badge--error {
-  background: var(--mat-sys-error-container);
-  color: var(--mat-sys-on-error-container);
+  background: var(--color-error-container);
+  color: var(--color-on-error-container);
 }
 
 .stat-badge--warning {
-  background: color-mix(in srgb, #ff9800 20%, var(--mat-sys-surface));
-  color: #e65100;
+  background: var(--color-warning-container);
+  color: var(--color-on-warning-container);
 }
 
 .stat-badge--info {
-  background: color-mix(in srgb, #2196f3 20%, var(--mat-sys-surface));
-  color: #0d47a1;
+  background: var(--color-info-container);
+  color: var(--color-on-info-container);
 }
 
 // M3 color variants
@@ -62,8 +62,8 @@
 
 // Filled variants (stronger emphasis)
 .stat-badge--filled-success {
-  background: #4caf50;
-  color: #fff;
+  background: var(--color-success);
+  color: var(--color-on-success);
 }
 
 .stat-badge--filled-error {
@@ -72,13 +72,13 @@
 }
 
 .stat-badge--filled-warning {
-  background: #ff9800;
-  color: #000;
+  background: var(--color-warning);
+  color: var(--color-on-warning);
 }
 
 .stat-badge--filled-info {
-  background: #2196f3;
-  color: #fff;
+  background: var(--color-info);
+  color: var(--color-on-info);
 }
 
 .stat-badge--filled-primary {
diff --git a/fakemui/styles/atoms/_table.scss b/fakemui/styles/atoms/_table.scss
index 40f273eca..69e82bedc 100644
--- a/fakemui/styles/atoms/_table.scss
+++ b/fakemui/styles/atoms/_table.scss
@@ -29,9 +29,9 @@
   text-align: left;
   font-family: var(--mat-sys-label-small-font);
   font-size: var(--mat-sys-label-small-size);
-  font-weight: 500;
+  font-weight: var(--mat-sys-label-small-weight);
   line-height: var(--mat-sys-label-small-line-height);
-  letter-spacing: 0.5px;
+  letter-spacing: var(--mat-sys-label-small-tracking);
   text-transform: uppercase;
   color: var(--mat-sys-on-surface-variant);
   background: var(--mat-sys-surface-container);
diff --git a/fakemui/styles/atoms/_tabs.scss b/fakemui/styles/atoms/_tabs.scss
index 90411faa9..5f704f548 100644
--- a/fakemui/styles/atoms/_tabs.scss
+++ b/fakemui/styles/atoms/_tabs.scss
@@ -199,5 +199,5 @@
   background: var(--mat-sys-error);
   color: var(--mat-sys-on-error);
   font-size: 0.625rem;
-  font-weight: 500;
+  font-weight: var(--mat-sys-label-small-weight);
 }
diff --git a/fakemui/styles/base.scss b/fakemui/styles/base.scss
index 5b5e815d5..0e957e00f 100644
--- a/fakemui/styles/base.scss
+++ b/fakemui/styles/base.scss
@@ -70,7 +70,7 @@ button {
 
 // Code
 code, pre {
-  font-family: var(--mat-sys-body-large-font);
+  font-family: var(--font-mono);
   font-feature-settings: "tnum" on, "lnum" on;
 }
 
@@ -108,5 +108,5 @@ code, pre {
 // Disabled state - M3 uses 38% opacity
 :disabled {
   cursor: not-allowed;
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
 }
diff --git a/fakemui/styles/components.scss b/fakemui/styles/components.scss
index 791175d5a..acc9574da 100644
--- a/fakemui/styles/components.scss
+++ b/fakemui/styles/components.scss
@@ -265,7 +265,7 @@
     font-size: var(--mat-sys-body-small-size);
 
     &.added {
-      color: #22c55e; // Success green
+      color: var(--color-success);
     }
 
     &.removed {
diff --git a/fakemui/styles/components/FormControl.module.scss b/fakemui/styles/components/FormControl.module.scss
index 8e094d3f5..4a0a76d3d 100644
--- a/fakemui/styles/components/FormControl.module.scss
+++ b/fakemui/styles/components/FormControl.module.scss
@@ -49,7 +49,7 @@
 
   // States
   &--disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     pointer-events: none;
   }
 
diff --git a/fakemui/styles/components/NativeSelect.module.scss b/fakemui/styles/components/NativeSelect.module.scss
index fbb94cc22..a44369d54 100644
--- a/fakemui/styles/components/NativeSelect.module.scss
+++ b/fakemui/styles/components/NativeSelect.module.scss
@@ -13,7 +13,7 @@
   }
 
   &--disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     pointer-events: none;
   }
 
diff --git a/fakemui/styles/components/Pickers.module.scss b/fakemui/styles/components/Pickers.module.scss
index 94b45783f..3ed7a27eb 100644
--- a/fakemui/styles/components/Pickers.module.scss
+++ b/fakemui/styles/components/Pickers.module.scss
@@ -68,7 +68,7 @@
   }
 
   &--disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     pointer-events: none;
   }
 
@@ -118,8 +118,8 @@
     padding: 12px 16px;
     border: 1px solid var(--mat-sys-outline);
     border-radius: var(--mat-sys-corner-medium);
-    font-family: 'JetBrains Mono', 'Fira Code', monospace;
-    font-size: 0.875rem;
+    font-family: var(--font-mono);
+    font-size: var(--mat-sys-body-small-size);
     background: var(--mat-sys-surface);
     color: var(--mat-sys-on-surface);
     text-transform: uppercase;
@@ -182,7 +182,7 @@
   }
 
   &--disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     pointer-events: none;
   }
 
diff --git a/fakemui/styles/components/Progress.module.scss b/fakemui/styles/components/Progress.module.scss
index 4fe6b2915..741825b08 100644
--- a/fakemui/styles/components/Progress.module.scss
+++ b/fakemui/styles/components/Progress.module.scss
@@ -18,7 +18,7 @@
     top: 0;
     bottom: 0;
     border-radius: inherit;
-    transition: width 0.3s ease;
+    transition: width var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);
   }
 
   .bar {
@@ -53,7 +53,7 @@
   // Determinate (default)
   &.determinate {
     .bar {
-      transition: width 0.4s linear;
+      transition: width var(--mat-sys-motion-duration-medium4) var(--mat-sys-motion-easing-linear);
     }
   }
 
@@ -122,19 +122,28 @@
 
   &.success {
     .bar, .bar2 {
-      background-color: #4caf50;
+      background-color: var(--color-success);
     }
     .buffer {
-      background-color: color-mix(in srgb, #4caf50 30%, transparent);
+      background-color: color-mix(in srgb, var(--color-success) 30%, transparent);
     }
   }
 
   &.warning {
     .bar, .bar2 {
-      background-color: #ff9800;
+      background-color: var(--color-warning);
     }
     .buffer {
-      background-color: color-mix(in srgb, #ff9800 30%, transparent);
+      background-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
+    }
+  }
+
+  &.info {
+    .bar, .bar2 {
+      background-color: var(--color-info);
+    }
+    .buffer {
+      background-color: color-mix(in srgb, var(--color-info) 30%, transparent);
     }
   }
 }
@@ -164,7 +173,7 @@
     }
 
     .circle {
-      transition: stroke-dashoffset 0.3s ease;
+      transition: stroke-dashoffset var(--mat-sys-motion-duration-medium2) var(--mat-sys-motion-easing-standard);
     }
   }
 
diff --git a/fakemui/styles/components/Table.module.scss b/fakemui/styles/components/Table.module.scss
index b83f193de..461a30352 100644
--- a/fakemui/styles/components/Table.module.scss
+++ b/fakemui/styles/components/Table.module.scss
@@ -88,7 +88,7 @@
   background-color: var(--mat-sys-surface-container);
 
   .cell {
-    font-weight: 500;
+    font-weight: var(--mat-sys-label-large-weight);
     border-top: 1px solid var(--mat-sys-outline-variant);
     border-bottom: none;
   }
@@ -300,7 +300,7 @@
   }
 
   &:disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     cursor: not-allowed;
   }
 
diff --git a/fakemui/styles/components/ToggleButton.module.scss b/fakemui/styles/components/ToggleButton.module.scss
index ce63929a5..1b26c2838 100644
--- a/fakemui/styles/components/ToggleButton.module.scss
+++ b/fakemui/styles/components/ToggleButton.module.scss
@@ -28,7 +28,7 @@
   }
 
   &:disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     cursor: not-allowed;
   }
 
diff --git a/fakemui/styles/global/_elements.scss b/fakemui/styles/global/_elements.scss
index ffb709839..776947176 100644
--- a/fakemui/styles/global/_elements.scss
+++ b/fakemui/styles/global/_elements.scss
@@ -21,7 +21,7 @@ button {
 }
 
 code, pre {
-  font-family: var(--mat-sys-body-large-font);
+  font-family: var(--font-mono);
   font-feature-settings: "tnum" on, "lnum" on;
   background-color: var(--mat-sys-surface-container);
   border-radius: var(--mat-sys-corner-extra-small);
diff --git a/fakemui/styles/global/_reset.scss b/fakemui/styles/global/_reset.scss
index 4294a1fdc..91f37304a 100644
--- a/fakemui/styles/global/_reset.scss
+++ b/fakemui/styles/global/_reset.scss
@@ -124,7 +124,7 @@ table {
 // Disabled state - M3 uses 38% opacity for content
 :disabled {
   cursor: not-allowed;
-  opacity: 0.38;
+  opacity: var(--disabled-content-opacity);
 }
 
 // Text wrapping
@@ -134,7 +134,7 @@ p, h1, h2, h3, h4, h5, h6 {
 
 // Code blocks
 code, kbd, samp, pre {
-  font-family: var(--mat-sys-body-large-font);
+  font-family: var(--font-mono);
   font-feature-settings: "tnum" on, "lnum" on;
 }
 
diff --git a/fakemui/styles/global/_utilities.scss b/fakemui/styles/global/_utilities.scss
index 13a8c6509..0db029234 100644
--- a/fakemui/styles/global/_utilities.scss
+++ b/fakemui/styles/global/_utilities.scss
@@ -41,7 +41,7 @@
 // ============================================
 
 .font-mono {
-  font-family: var(--mat-sys-body-large-font);
+  font-family: var(--font-mono);
   font-feature-settings: "tnum" on, "lnum" on;
 }
 
diff --git a/fakemui/styles/mixins/_input.scss b/fakemui/styles/mixins/_input.scss
index 1025e1928..1be0d5d50 100644
--- a/fakemui/styles/mixins/_input.scss
+++ b/fakemui/styles/mixins/_input.scss
@@ -29,7 +29,7 @@
   }
 
   &:disabled {
-    opacity: 0.38;
+    opacity: var(--disabled-content-opacity);
     cursor: not-allowed;
   }
 }
diff --git a/fakemui/styles/mixins/_interactive.scss b/fakemui/styles/mixins/_interactive.scss
index e284f6f20..53d57860f 100644
--- a/fakemui/styles/mixins/_interactive.scss
+++ b/fakemui/styles/mixins/_interactive.scss
@@ -78,12 +78,12 @@
     background-position: 50%;
     transform: scale(10, 10);
     opacity: 0;
-    transition: transform 0.5s, opacity 1s;
+    transition: transform var(--mat-sys-motion-duration-long2), opacity var(--mat-sys-motion-duration-long4);
   }
 
   &:active::after {
     transform: scale(0, 0);
-    opacity: 0.12;
+    opacity: var(--state-pressed-opacity);
     transition: 0s;
   }
 }
diff --git a/fakemui/styles/mixins/_typography.scss b/fakemui/styles/mixins/_typography.scss
index 9ac07cbbd..f9bfff808 100644
--- a/fakemui/styles/mixins/_typography.scss
+++ b/fakemui/styles/mixins/_typography.scss
@@ -7,7 +7,7 @@
 }
 
 @mixin mono {
-  font-family: var(--mat-sys-body-large-font);
+  font-family: var(--font-mono);
   font-feature-settings: "tnum" on, "lnum" on; // Tabular numbers
 }