Use font-size from design system

Author: dshil

src/ui/preact/dashboard.css

@@ -27,7 +27,7 @@
 }
 
 .nav-logo {
-  font-size: 1.25rem;
+  font-size: var(--font-size-xl);
   font-weight: 600;
   color: var(--color-text-dark);
   display: flex;
@@ -81,7 +81,7 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-button);
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--font-size-s);
   color: var(--color-text-dark);
   transition: background-color var(--transition);
   -webkit-appearance: none;
@@ -113,7 +113,7 @@
 }
 
 .system-config-title {
-  font-size: 1.125rem;
+  font-size: var(--font-size-l);
   font-weight: 600;
   color: var(--color-text-dark);
   margin: 0 0 var(--spacing) 0;
@@ -154,7 +154,7 @@
 }
 
 .dashboard-card-title {
-  font-size: 1.125rem;
+  font-size: var(--font-size-l);
   font-weight: 600;
   color: var(--color-text-dark);
   margin: 0 0 var(--spacing) 0;

src/ui/preact/form_config_component.css

@@ -26,7 +26,7 @@
 .config-title {
   margin: 0 0 1.25rem 0;
   color: var(--color-text);
-  font-size: 1rem;
+  font-size: var(--font-size-m);
   font-weight: 600;
 }
 
@@ -64,7 +64,7 @@
 }
 
 .form-label {
-  font-size: 0.875rem;
+  font-size: var(--font-size-s);
   font-weight: 600;
   color: var(--color-text-dark);
   text-align: right;
@@ -75,7 +75,7 @@
   padding: var(--spacing-small) 0.75rem;
   border: 2px solid var(--config-border-input);
   border-radius: var(--radius-small);
-  font-size: 0.875rem;
+  font-size: var(--font-size-s);
   background-color: var(--color-white);
   transition: all var(--transition);
   font-family: inherit;
@@ -107,7 +107,7 @@
   border: none;
   border-radius: var(--radius-button);
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--font-size-s);
   font-weight: 600;
   transition: all var(--transition);
   min-width: 5rem;

src/ui/preact/index.css

@@ -53,18 +53,12 @@ a:hover {
   color: var(--color-link-hover);
 }
 
-/* Typography */
-h1 {
-  font-size: 3.2rem;
-  line-height: 1.1;
-}
-
 /* Buttons */
 button {
   border-radius: var(--radius-small);
   border: 1px solid var(--color-border-transparent);
   padding: var(--spacing-button);
-  font-size: 1rem;
+  font-size: var(--font-size-m);
   font-weight: var(--font-weight-medium);
   font-family: inherit;
   background-color: var(--color-button-bg);
@@ -80,10 +74,3 @@ button:focus,
 button:focus-visible {
   outline: var(--outline-width) auto -webkit-focus-ring-color;
 }
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-  h1 {
-    font-size: 2rem;
-  }
-}

src/ui/preact/markdown_component.css

@@ -30,7 +30,7 @@
   right: var(--spacing);
   background: none;
   border: none;
-  font-size: 1.5rem;
+  font-size: var(--font-size-2xl);
   cursor: pointer;
   color: var(--color-text-secondary);
   z-index: 1001;
@@ -52,7 +52,7 @@
   overflow-y: auto;
   line-height: 1.6;
   text-align: left;
-  font-size: 1.25rem;
+  font-size: var(--font-size-xl);
 }
 
 .markdown-content h1, .markdown-content h2, .markdown-content h3 {
@@ -88,6 +88,6 @@
 
   .markdown-content {
     padding: var(--spacing);
-    font-size: 1rem;
+    font-size: var(--font-size-m);
   }
 }

src/ui/preact/notification_component.css

@@ -77,7 +77,7 @@
 }
 
 .notification-message {
-  font-size: 0.9375rem;
+  font-size: var(--font-size-m);
   color: var(--notification-text);
   font-weight: 500;
   line-height: 1.4;
@@ -129,7 +129,7 @@
   border: none;
   border-radius: var(--radius-small);
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--font-size-s);
   font-weight: 500;
   transition: all var(--transition);
   min-width: 4.5rem;