diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
index d5e8f67..8fbc754 100644
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
@@ -1,3 +1,28 @@
+:root {
+    /* Light theme colors */
+    --bg-primary: #fff;
+    --bg-secondary: #f8f9fa;
+    --text-primary: #444;
+    --text-secondary: #999;
+    --border-primary: #ccc;
+    --border-secondary: #e0e0e0;
+    --accent-primary: #009E60;
+    --accent-primary-hover: #007a4d;
+    --accent-primary-focus: rgba(0, 158, 96, 0.2);
+    --danger-primary: #dc3545;
+    --danger-hover: #c82333;
+    --danger-border: #bd2130;
+    --success-primary: green;
+    --warning-primary: orangered;
+    
+    /* Dark theme colors */
+    --dark-bg-primary: #222;
+    --dark-bg-secondary: #333;
+    --dark-text-primary: #ddd;
+    --dark-border-primary: #555;
+    --dark-border-secondary: #444;
+}
+
 html {
     font-size: 14px;
     height: 100%;
@@ -34,16 +59,16 @@ div.note-actions {
 select.note-dropdown {
     padding: 6px 8px;
     border-radius: 5px;
-    border: 1px solid #ccc;
-    background-color: #fff;
+    border: 1px solid var(--border-primary);
+    background-color: var(--bg-primary);
     font-size: 13px;
     width: 80px;
 }
 
 body.dark select.note-dropdown {
-    background-color: #333;
-    color: #ddd;
-    border: 1px solid #555;
+    background-color: var(--dark-bg-secondary);
+    color: var(--dark-text-primary);
+    border: 1px solid var(--dark-border-primary);
 }
 
 form.action-form {
@@ -54,23 +79,23 @@ form.action-form {
 
 form.action-form input[type="text"] {
     padding: 6px 8px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-primary);
     border-radius: 5px;
     font-size: 13px;
     width: 60px;
-    background-color: #fff;
+    background-color: var(--bg-primary);
 }
 
 body.dark form.action-form input[type="text"] {
-    background-color: #333;
-    color: #ddd;
-    border: 1px solid #555;
+    background-color: var(--dark-bg-secondary);
+    color: var(--dark-text-primary);
+    border: 1px solid var(--dark-border-primary);
 }
 
 form.action-form input[type="text"]:focus {
     outline: none;
-    border-color: #009E60;
-    box-shadow: 0 0 0 2px rgba(0, 158, 96, 0.2);
+    border-color: var(--accent-primary);
+    box-shadow: 0 0 0 2px var(--accent-primary-focus);
 }
 
 .btn-symbol {
@@ -89,26 +114,26 @@ form.action-form input[type="text"]:focus {
 }
 
 .btn-delete {
-    background-color: #dc3545;
-    color: #fff;
-    border-color: #dc3545;
+    background-color: var(--danger-primary);
+    color: var(--bg-primary);
+    border-color: var(--danger-primary);
 }
 
 .btn-delete:hover {
-    background-color: #c82333;
-    border-color: #bd2130;
+    background-color: var(--danger-hover);
+    border-color: var(--danger-border);
     transform: scale(1.05);
 }
 
 .btn-create {
-    background-color: #009E60;
-    color: #fff;
-    border-color: #009E60;
+    background-color: var(--accent-primary);
+    color: var(--bg-primary);
+    border-color: var(--accent-primary);
 }
 
 .btn-create:hover {
-    background-color: #007a4d;
-    border-color: #006b42;
+    background-color: var(--accent-primary-hover);
+    border-color: var(--accent-primary-hover);
     transform: scale(1.05);
 }
 
@@ -118,7 +143,7 @@ textarea {
     padding: 15px;
     margin: 0;
     resize: none;
-    color: #444;
+    color: var(--text-primary);
     font-size: 16px;
     font-family: Consolas, 'Courier New', monospace;
     outline: none;
@@ -130,8 +155,8 @@ textarea {
 body.dark,
 body.dark input,
 body.dark textarea {
-    background-color: #222;
-    color: #ddd;
+    background-color: var(--dark-bg-primary);
+    color: var(--dark-text-primary);
 }
 
 .toast {
@@ -140,7 +165,7 @@ body.dark textarea {
     right: 25px;
     font-size: 11px;
     padding: 6px;
-    color: #fff;
+    color: var(--bg-primary);
     transition: bottom 0.3s, opacity 0.3s;
     opacity: 0;
     border-radius: 5px 5px 0 0;
@@ -152,11 +177,11 @@ body.dark textarea {
 }
 
 .toast#saved-indicator {
-    background-color: green;
+    background-color: var(--success-primary);
 }
 
 .toast#update-indicator {
-    background-color: orangered;
+    background-color: var(--warning-primary);
 }
 
 form.login-form input[type=password],
@@ -167,13 +192,24 @@ form.login-form button {
     margin: 20px auto;
     font-size: 20px;
     padding: 8px;
-    border: 1px solid #333;
+    border: 1px solid var(--dark-bg-secondary);
     border-radius: 8px;
     box-sizing: border-box;
 }
 
 form.login-form input[type=password] {
-    color: #999;
+    color: var(--text-secondary);
+}
+
+form.login-form button {
+    background-color: var(--accent-primary);
+    color: var(--bg-primary);
+    border-color: var(--accent-primary);
+}
+
+form.login-form button:hover {
+    background-color: var(--accent-primary-hover);
+    border-color: var(--accent-primary-hover);
 }
 
 button, select {