Fix up CSS and dark mode

Author: vdavid

src/app.css

@@ -1 +1,64 @@
 @import 'tailwindcss';
+
+/* =============================================================================
+   Design tokens - CSS Custom Properties
+   
+   These variables serve as the single source of truth for all colors, spacing,
+   and typography. They can be used in both scoped CSS and Tailwind classes.
+   
+   Future: Can be modified at runtime for user theme customization.
+   ============================================================================= */
+
+:root {
+    /* === Backgrounds === */
+    --color-bg-primary: #ffffff;
+    --color-bg-secondary: #f5f5f5;
+
+    /* === Borders === */
+    --color-border-primary: #ccc;
+
+    /* === Text === */
+    --color-text-primary: #000000;
+    --color-text-secondary: #666666;
+    --color-text-muted: #999999;
+
+    /* === Interactive States === */
+    --color-hover-bg: rgba(0, 120, 215, 0.1);
+
+    /* === Semantic Colors === */
+    --color-error: #d32f2f;
+
+    /* === Spacing === */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+
+    /* === Typography === */
+    --font-mono: 'SF Mono', Monaco, monospace;
+    --font-size-xs: 12px;
+    --font-size-sm: 13px;
+    --font-size-base: 14px;
+}
+
+/* Dark Mode - automatically applied when user's system prefers dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* === Backgrounds === */
+        --color-bg-primary: #1e1e1e;
+        --color-bg-secondary: #2a2a2a;
+
+        /* === Borders === */
+        --color-border-primary: #444444;
+
+        /* === Text === */
+        --color-text-primary: #ffffff;
+        --color-text-secondary: #aaaaaa;
+        --color-text-muted: #808080;
+
+        /* === Interactive States === */
+        --color-hover-bg: rgba(100, 180, 255, 0.15);
+
+        /* === Semantic Colors === */
+        --color-error: #f44336;
+    }
+}

src/lib/file-explorer/FileList.svelte

@@ -27,25 +27,25 @@
         margin: 0;
         padding: 0;
         overflow-y: auto;
-        font-family: 'SF Mono', Monaco, monospace;
-        font-size: 13px;
+        font-family: var(--font-mono) monospace;
+        font-size: var(--font-size-sm);
     }
 
     .file-entry {
-        padding: 0.25rem 0.5rem;
+        padding: var(--spacing-xs) var(--spacing-sm);
         cursor: pointer;
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: var(--spacing-sm);
         user-select: none;
     }
 
     .file-entry:hover {
-        background-color: rgba(0, 120, 215, 0.1);
+        background-color: var(--color-hover-bg);
     }
 
     .icon {
-        font-size: 14px;
+        font-size: var(--font-size-base);
         flex-shrink: 0;
     }
 

src/lib/file-explorer/FilePane.svelte

@@ -60,22 +60,22 @@
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        border: 1px solid #ccc;
+        border: 1px solid var(--color-border-primary);
     }
 
     .header {
-        padding: 0.5rem;
-        background-color: #f5f5f5;
-        border-bottom: 1px solid #ccc;
-        font-size: 12px;
+        padding: var(--spacing-sm);
+        background-color: var(--color-bg-secondary);
+        border-bottom: 1px solid var(--color-border-primary);
+        font-size: var(--font-size-xs);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 
     .path {
-        font-family: 'SF Mono', Monaco, monospace;
-        color: #666;
+        font-family: var(--font-mono) monospace;
+        color: var(--color-text-secondary);
     }
 
     .content {
@@ -91,36 +91,13 @@
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: #666;
-        font-size: 14px;
+        color: var(--color-text-secondary);
+        font-size: var(--font-size-base);
     }
 
     .error-message {
-        color: #d32f2f;
+        color: var(--color-error);
         text-align: center;
-        padding: 1rem;
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .file-pane {
-            border-color: #444;
-        }
-
-        .header {
-            background-color: #2a2a2a;
-            border-bottom-color: #444;
-        }
-
-        .path {
-            color: #aaa;
-        }
-
-        .message {
-            color: #aaa;
-        }
-
-        .error-message {
-            color: #f44336;
-        }
+        padding: var(--spacing-md);
     }
 </style>

src/routes/+page.svelte

@@ -11,6 +11,8 @@
         width: 100%;
         height: 100%;
         overflow: hidden;
+        background-color: var(--color-bg-primary);
+        color: var(--color-text-primary);
     }
 
     :global(#app) {