diff --git a/login.html b/login.html
index b206da7..ccdc7a8 100644
--- a/login.html
+++ b/login.html
@@ -11,19 +11,33 @@
             box-sizing: border-box;
         }
 
+        :root {
+            --primary: #0891b2;
+            --secondary: #64748b;
+            --success: #059669;
+            --warning: #d97706;
+            --danger: #dc2626;
+            --bg-dark: #0f172a;
+            --bg-card: #1e293b;
+            --text-primary: #f1f5f9;
+            --text-secondary: #94a3b8;
+            --border: #334155;
+            --verified: #10b981;
+        }
+
         body {
-            font-family: 'Monaco', 'Courier New', monospace;
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 100%);
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: #f1f5f9;
+            color: var(--text-primary);
         }
 
         .login-container {
-            background: #1e293b;
-            border: 1px solid #334155;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
             border-radius: 12px;
             padding: 48px;
             width: 100%;
@@ -38,13 +52,13 @@
 
         .logo h1 {
             font-size: 32px;
-            color: #0891b2;
+            color: var(--primary);
             margin-bottom: 8px;
         }
 
         .logo p {
             font-size: 14px;
-            color: #94a3b8;
+            color: var(--text-secondary);
         }
 
         .form-group {
@@ -63,25 +77,25 @@
         input[type="password"] {
             width: 100%;
             padding: 12px 16px;
-            background: #0f172a;
+            background: var(--bg-dark);
             border: 1px solid #475569;
             border-radius: 6px;
-            color: #f1f5f9;
+            color: var(--text-primary);
             font-size: 14px;
-            font-family: 'Monaco', 'Courier New', monospace;
+            font-family: inherit;
             transition: border-color 0.2s;
         }
 
         input[type="text"]:focus,
         input[type="password"]:focus {
             outline: none;
-            border-color: #0891b2;
+            border-color: var(--primary);
         }
 
         .button-primary {
             width: 100%;
             padding: 14px;
-            background: #0891b2;
+            background: var(--primary);
             color: white;
             border: none;
             border-radius: 6px;
@@ -89,7 +103,7 @@
             font-weight: 600;
             cursor: pointer;
             transition: background 0.2s;
-            font-family: 'Monaco', 'Courier New', monospace;
+            font-family: inherit;
         }
 
         .button-primary:hover {
@@ -118,7 +132,7 @@
 
         .info-box {
             background: rgba(8, 145, 178, 0.1);
-            border: 1px solid #0891b2;
+            border: 1px solid var(--primary);
             border-radius: 6px;
             padding: 16px;
             margin-top: 24px;
@@ -128,7 +142,7 @@
 
         .info-box h3 {
             margin-bottom: 8px;
-            color: #0891b2;
+            color: var(--primary);
         }
 
         .info-box ul {
@@ -147,7 +161,7 @@
             border: 1px solid #475569;
             border-radius: 6px;
             font-size: 11px;
-            color: #94a3b8;
+            color: var(--text-secondary);
             text-align: center;
         }
 
@@ -155,7 +169,7 @@
             display: inline-block;
             width: 16px;
             height: 16px;
-            border: 2px solid #f1f5f9;
+            border: 2px solid var(--text-primary);
             border-radius: 50%;
             border-top-color: transparent;
             animation: spin 0.8s linear infinite;