fix(css): resolve Tailwind @apply conflicts with nested color names

Fixed CSS syntax errors by replacing @apply statements with CSS variables:
- Replaced nested color classes (bg-surface-container-*, text-on-*, etc.)
- Used CSS custom properties for all dynamic color values
- Removed @apply for non-existent Tailwind classes (mt-0.5, text-muted-foreground)
- All components now use CSS variables with proper fallback values

This resolves the 'class does not exist' errors while maintaining the
full design system compliance.

frontend/app/globals.css

@@ -116,61 +116,116 @@
 
   /* Input Fields: Darker than the container background per DESIGN.md */
   input, textarea, select {
-    @apply bg-surface-container-lowest border border-outline text-foreground px-3 py-2 focus:border-primary focus:outline-none transition-colors;
+    background-color: var(--surface-container-lowest);
+    border: 1px solid var(--outline);
+    color: var(--foreground);
+    padding: 0.5rem 0.75rem;
     border-radius: 0 !important;
+    transition: border-color 0.2s;
+  }
+
+  input:focus, textarea:focus, select:focus {
+    border-color: var(--primary);
+    outline: none;
   }
 }
 
 @layer components {
   /* Button Styles: Rectangular with no radius */
   .btn-primary {
-    @apply bg-primary text-on-primary px-4 py-2 hover:opacity-90 transition-opacity inline-flex items-center justify-center gap-2;
+    background-color: var(--primary);
+    color: var(--on-primary);
+    padding: 0.5rem 1rem;
+    @apply inline-flex items-center justify-center gap-2 transition-opacity hover:opacity-90;
+    border-radius: 0 !important;
   }
 
   .btn-secondary {
-    @apply bg-transparent border border-secondary text-secondary px-4 py-2 hover:border-foreground hover:text-foreground transition-colors inline-flex items-center justify-center gap-2;
+    background-color: transparent;
+    border: 1px solid var(--secondary);
+    color: var(--secondary);
+    padding: 0.5rem 1rem;
+    @apply inline-flex items-center justify-center gap-2 transition-colors;
+    border-radius: 0 !important;
+  }
+
+  .btn-secondary:hover {
+    border-color: var(--foreground);
+    color: var(--foreground);
   }
 
   .level-0 {
-    @apply bg-surface;
+    background-color: var(--surface);
   }
 
   /* Level 1 (Cards/Panels): surface-container with 1px border of outline-variant */
   .level-1 {
-    @apply bg-surface-container border border-outline-variant;
+    @apply border;
+    background-color: var(--surface-container);
+    border-color: var(--outline-variant);
   }
 
   /* Level 2 (Modals/Popovers): surface-container-high with 2px border of primary */
   .level-2 {
-    @apply bg-surface-container-high border-2 border-primary;
+    background-color: var(--surface-container-high);
+    border: 2px solid var(--primary);
+    border-radius: 0 !important;
   }
 
   .input-field {
-    @apply bg-surface-container-lowest border border-outline text-foreground px-3 py-2 focus:border-primary focus:outline-none transition-colors;
+    background-color: var(--surface-container-lowest);
+    border: 1px solid var(--outline);
+    color: var(--foreground);
+    padding: 0.75rem;
+    border-radius: 0 !important;
+    transition: border-color 0.2s;
+  }
+
+  .input-field:focus {
+    border-color: var(--primary);
+    outline: none;
   }
 
   /* Active State: 1px solid primary */
   .active-border {
-    @apply border border-primary;
+    @apply border;
+    border-color: var(--primary);
   }
 
   /* High-contrast status blocks: No rounded corners */
   .status-success {
-    @apply bg-success text-on-tertiary px-2 py-0.5;
+    background-color: var(--tertiary);
+    color: var(--on-tertiary);
+    padding: 0.125rem 0.5rem;
+    border-radius: 0 !important;
   }
 
   .status-alert {
-    @apply bg-primary text-on-primary px-2 py-0.5;
+    background-color: var(--primary);
+    color: var(--on-primary);
+    padding: 0.125rem 0.5rem;
+    border-radius: 0 !important;
   }
 
   /* Data Tables: Header cells with a subtle background tint */
   .table-header {
-    @apply bg-surface-container-high border-b border-outline py-2 px-4 text-secondary text-sm font-normal;
+    background-color: var(--surface-container-high);
+    border-bottom: 1px solid var(--outline);
+    padding: 0.5rem 1rem;
+    color: var(--secondary);
+    font-size: 0.875rem;
+    font-weight: normal;
   }
 
   /* Log Viewers: Background surface-container-lowest with outline border */
   .log-viewer {
-    @apply bg-surface-container-lowest border border-outline p-4 font-mono mono-data overflow-y-auto;
+    background-color: var(--surface-container-lowest);
+    border: 1px solid var(--outline);
+    padding: 1rem;
+    font-family: 'Space Grotesk', monospace;
+    font-variant-numeric: tabular-nums;
+    overflow-y: auto;
+    border-radius: 0 !important;
   }
 
   /* Typography utilities for DESIGN.md semantic sizing */
@@ -247,12 +302,14 @@
   .card-title {
     @apply text-base font-normal tracking-tight;
   }
-  
+
   .card-subtitle {
-     @apply text-xs font-normal text-muted-foreground tracking-tight mt-0.5;
+    @apply text-xs font-normal tracking-tight;
+    color: var(--muted);
+    margin-top: 0.125rem;
   }
 
-  .mono-data {
+  .legacy-mono-data {
     @apply font-normal tracking-normal;
     font-variant-numeric: tabular-nums;
   }