diff --git a/src/styles.css b/src/styles.css
index 352d198..0a41f8a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -10,6 +10,15 @@
   --accent-2: #ff3b30;
   --ok: #26c281;
   --warn: #f5a623;
+  --surface-soft: rgba(255, 255, 255, 0.02);
+  --surface-card: rgba(255, 255, 255, 0.03);
+  --surface-elevated: rgba(255, 255, 255, 0.025);
+  --field-bg: #0f1522;
+  --field-text: var(--text);
+  --table-head-bg: rgba(255, 255, 255, 0.03);
+  --table-hover-bg: rgba(255, 255, 255, 0.02);
+  --danger-soft: rgba(225, 6, 0, 0.08);
+  --danger-text: #ffd0d0;
   --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
 }
 
@@ -25,6 +34,15 @@ body[data-theme="nord"] {
   --accent-2: #88c0d0;
   --ok: #79c9a4;
   --warn: #f0c674;
+  --surface-soft: rgba(255, 255, 255, 0.025);
+  --surface-card: rgba(255, 255, 255, 0.04);
+  --surface-elevated: rgba(255, 255, 255, 0.03);
+  --field-bg: #132033;
+  --field-text: var(--text);
+  --table-head-bg: rgba(255, 255, 255, 0.04);
+  --table-hover-bg: rgba(255, 255, 255, 0.03);
+  --danger-soft: rgba(191, 97, 106, 0.14);
+  --danger-text: #ffd8db;
   --shadow: 0 12px 32px rgba(4, 10, 18, 0.42);
 }
 
@@ -40,6 +58,15 @@ body[data-theme="light"] {
   --accent-2: #ef4444;
   --ok: #1f9d67;
   --warn: #c98914;
+  --surface-soft: rgba(20, 32, 51, 0.03);
+  --surface-card: rgba(20, 32, 51, 0.05);
+  --surface-elevated: rgba(20, 32, 51, 0.04);
+  --field-bg: #ffffff;
+  --field-text: #152033;
+  --table-head-bg: rgba(20, 32, 51, 0.05);
+  --table-hover-bg: rgba(20, 32, 51, 0.03);
+  --danger-soft: rgba(214, 40, 40, 0.08);
+  --danger-text: #8e1b1b;
   --shadow: 0 10px 28px rgba(27, 45, 78, 0.12);
 }
 
@@ -124,7 +151,7 @@ body {
 
 .nav-item {
   border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--surface-soft);
   color: var(--text);
   border-radius: 10px;
   padding: 10px 12px;
@@ -202,7 +229,7 @@ body {
   border-radius: 999px;
   padding: 8px 12px;
   font-weight: 600;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--surface-soft);
 }
 
 .topbar-right {
@@ -248,8 +275,8 @@ body {
 
 .stat-card {
   background:
-    linear-gradient(170deg, rgba(225, 6, 0, 0.12), transparent 40%),
-    linear-gradient(180deg, #151d2d 0%, #121927 100%);
+    linear-gradient(170deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 40%),
+    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 14px;
@@ -275,7 +302,7 @@ body {
 }
 
 .panel {
-  background: linear-gradient(180deg, #131a28 0%, #101724 100%);
+  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
   border: 1px solid var(--line);
   border-radius: 14px;
   box-shadow: var(--shadow);
@@ -319,8 +346,8 @@ body {
 }
 
 .btn {
-  border: 1px solid #425273;
-  background: linear-gradient(180deg, #1a2334 0%, #141c2b 100%);
+  border: 1px solid color-mix(in srgb, var(--line) 72%, var(--accent) 28%);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, white 12%) 0%, var(--panel-2) 100%);
   color: var(--text);
   border-radius: 10px;
   font-weight: 700;
@@ -329,7 +356,7 @@ body {
 }
 
 .btn:hover {
-  border-color: #60739b;
+  border-color: color-mix(in srgb, var(--line) 45%, var(--accent) 55%);
 }
 
 .btn-primary {
@@ -359,7 +386,7 @@ body {
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--surface-elevated);
 }
 
 .field-card-checkbox {
@@ -405,7 +432,7 @@ body {
   padding: 10px;
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--surface-elevated);
   display: grid;
   gap: 5px;
 }
@@ -564,14 +591,14 @@ body {
 .race-actions-panel {
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--surface-elevated);
   overflow: hidden;
 }
 
 .race-format-section .panel-header,
 .race-summary-card .panel-header,
 .race-actions-panel .panel-header {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--surface-soft);
 }
 
 .race-format-grid {
@@ -605,7 +632,7 @@ body {
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-card);
 }
 
 .race-summary-item span {
@@ -686,7 +713,7 @@ body {
   padding: 14px;
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-card);
   display: grid;
   gap: 8px;
 }
@@ -715,10 +742,10 @@ body {
 input,
 select {
   width: 100%;
-  background: #0f1522;
+  background: var(--field-bg);
   border: 1px solid var(--line);
   border-radius: 10px;
-  color: var(--text);
+  color: var(--field-text);
   padding: 9px 10px;
 }
 
@@ -737,8 +764,8 @@ select:focus {
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 10px;
-  background: #0b1019;
-  color: #c8d6f5;
+  background: color-mix(in srgb, var(--panel-2) 94%, black 6%);
+  color: var(--text);
   white-space: pre-wrap;
   font-family: "SFMono-Regular", Consolas, monospace;
   font-size: 0.82rem;
@@ -750,7 +777,7 @@ select:focus {
 }
 
 .data-table thead {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--table-head-bg);
 }
 
 .data-table th,
@@ -762,19 +789,19 @@ select:focus {
 }
 
 .data-table tr.passing-invalid td {
-  background: rgba(225, 6, 0, 0.08);
-  color: #ffd0d0;
+  background: var(--danger-soft);
+  color: var(--danger-text);
 }
 
 .data-table th {
-  color: #bdc8e3;
+  color: var(--muted);
   font-size: 0.82rem;
   text-transform: uppercase;
   letter-spacing: 0.55px;
 }
 
 .data-table tbody tr:hover {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--table-hover-bg);
 }
 
 .simple-list {
@@ -792,7 +819,7 @@ select:focus {
 }
 
 .assignment-group {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--surface-soft);
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 10px;
@@ -821,7 +848,7 @@ select:focus {
 .form-error {
   grid-column: 1 / -1;
   margin: 0;
-  color: #ff9b9b;
+  color: color-mix(in srgb, var(--accent) 62%, white 38%);
   font-size: 0.9rem;
 }
 
@@ -844,7 +871,7 @@ select:focus {
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 14px 16px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-card);
 }
 
 .dashboard-live-card span,
@@ -870,7 +897,7 @@ select:focus {
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 12px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-card);
   display: grid;
   gap: 10px;
 }