1 files changed, 48 insertions, 26 deletions

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 700135c..4f9d49f 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,16 +1,39 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
+  /* rendering optimizations */
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  /* sizes */
+  --avatar-size: 48px;
+
+  /* colors - light theme */
+  --bg-primary: #fff;
+  --bg-secondary: #f5f5f5;
+  --text-primary: #242424;
+  --text-secondary: #4b4b4b;
+  --text-muted: rgba(0, 0, 0, 0.5);
+  --border: #444;
+  --accent: #646cff;
+  --accent-hover: #535bf2;
+  --error: #ff4444;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* colors - dark theme */
+    --bg-primary: #242424;
+    --bg-secondary: #424242;
+    --text-primary: #f5f5f5;
+    --text-secondary: #b0b0b0;
+    --text-muted: rgba(255, 255, 255, 0.5);
+    --border: #444;
+    --accent: #646cff;
+    --accent-hover: #535bf2;
+    --error: #ff4444;
+  }
 }
 
 #login-container {
@@ -26,23 +49,29 @@
 }
 
 #login-error {
-  color: red;
+  color: var(--error);
   margin-top: 1rem;
 }
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--accent);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--accent-hover);
 }
 
 body {
+  background: var(--bg-primary);
+  color: var(--text-primary);
   margin: 0;
   display: flex;
   min-height: 100vh;
+
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 }
 
 h1 {
@@ -60,12 +89,12 @@ h1 {
   display: flex;
   gap: 10px;
   padding: 15px;
-  border-bottom: 1px solid #444;
+  border-bottom: 1px solid var(--border);
 }
 
 .note-avatar {
-  width: 48px;
-  height: 48px;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
   flex-shrink: 0;
 }
 
@@ -78,28 +107,21 @@ h1 {
 }
 
 .muted {
-  opacity: 0.5;
+  color: var(--text-muted);
   font-size: 12px;
 }
 
 .spinner {
-  border: 16px solid #f3f3f3;
-  border-top: 16px solid #3498db;
+  border: 8px solid #f3f3f3;
+  border-top: 8px solid var(--accent);
   border-radius: 50%;
-  width: 120px;
-  height: 120px;
+  width: 64px;
+  height: 64px;
   animation: spin 2s linear infinite;
-  margin: 50px auto;
+  margin: 20px auto;
 }
 
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-}