diff --git a/src/app.js b/src/app.js
index f03a8c2..5c46d24 100644
--- a/src/app.js
+++ b/src/app.js
@@ -368,7 +368,7 @@ const TRANSLATIONS = {
     "nav.guide_sub": "Dokumentation och uppstart",
     "ui.language": "Språk",
     "ui.theme": "Tema",
-    "ui.theme_dark": "Mörk",
+    "ui.theme_dark": "RaceCore",
     "ui.theme_nord": "Nord",
     "ui.theme_light": "Ljus",
     "brand.title": "RC RaceCore",
@@ -1612,7 +1612,7 @@ const TRANSLATIONS = {
     "nav.guide_sub": "Documentation and setup",
     "ui.language": "Language",
     "ui.theme": "Theme",
-    "ui.theme_dark": "Dark",
+    "ui.theme_dark": "RaceCore",
     "ui.theme_nord": "Nord",
     "ui.theme_light": "Light",
     "brand.title": "RC RaceCore",
diff --git a/src/styles.css b/src/styles.css
index be9eaf3..b7bd200 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,25 +1,25 @@
 :root {
-  --bg: #07090e;
-  --bg-soft: #0f1420;
-  --panel: #131a28;
-  --panel-2: #0c1220;
-  --line: #273149;
-  --text: #f3f7ff;
-  --muted: #98a7c8;
-  --accent: #e10600;
-  --accent-2: #ff3b30;
+  --bg: #090f1c;
+  --bg-soft: #101a2e;
+  --panel: #141f34;
+  --panel-2: #0c1527;
+  --line: #2a3a58;
+  --text: #f7f8fb;
+  --muted: #9aa9c4;
+  --accent: #d21f22;
+  --accent-2: #0ea5e9;
   --ok: #26c281;
   --warn: #f5a623;
   --success: var(--ok);
-  --danger: var(--accent-2);
+  --danger: #ef4444;
   --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-bg: #101a2b;
   --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-soft: rgba(239, 68, 68, 0.1);
   --danger-text: #ffd0d0;
   --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
 }
@@ -36,6 +36,7 @@ body[data-theme="nord"] {
   --accent-2: #88c0d0;
   --ok: #79c9a4;
   --warn: #f0c674;
+  --danger: #bf616a;
   --surface-soft: rgba(255, 255, 255, 0.025);
   --surface-card: rgba(255, 255, 255, 0.04);
   --surface-elevated: rgba(255, 255, 255, 0.03);
@@ -49,25 +50,26 @@ body[data-theme="nord"] {
 }
 
 body[data-theme="light"] {
-  --bg: #eef2f8;
-  --bg-soft: #f7f9fc;
+  --bg: #f2f3f5;
+  --bg-soft: #fcfbf8;
   --panel: #ffffff;
-  --panel-2: #ecf1f7;
-  --line: #cfd8e6;
-  --text: #152033;
-  --muted: #5f708d;
-  --accent: #d62828;
-  --accent-2: #ef4444;
+  --panel-2: #f3f4f6;
+  --line: #d7dae0;
+  --text: #292b31;
+  --muted: #69707d;
+  --accent: #d21f22;
+  --accent-2: #0e91c8;
   --ok: #1f9d67;
   --warn: #c98914;
+  --danger: #c62828;
   --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;
+  --field-text: #292b31;
   --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-soft: rgba(198, 40, 40, 0.08);
   --danger-text: #8e1b1b;
   --shadow: 0 10px 28px rgba(27, 45, 78, 0.12);
 }
@@ -96,7 +98,7 @@ body {
 .sidebar {
   border-right: 1px solid var(--line);
   background:
-    linear-gradient(180deg, rgba(225, 6, 0, 0.1), transparent 25%),
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 25%),
     repeating-linear-gradient(
       -32deg,
       rgba(255, 255, 255, 0.02) 0,
@@ -132,8 +134,13 @@ body {
   place-items: center;
   font-family: Orbitron, sans-serif;
   font-weight: 800;
-  background: linear-gradient(135deg, #ff574f 0%, var(--accent) 55%, #8b0000 100%);
-  box-shadow: 0 8px 20px rgba(225, 6, 0, 0.5);
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--accent) 72%, white 28%) 0%,
+    var(--accent) 55%,
+    color-mix(in srgb, var(--accent) 62%, black 38%) 100%
+  );
+  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 46%, transparent);
 }
 
 .brand h1 {
@@ -183,13 +190,17 @@ body {
 }
 
 .nav-item:hover {
-  border-color: #405076;
+  border-color: color-mix(in srgb, var(--accent-2) 42%, var(--line));
   transform: translateX(3px);
 }
 
 .nav-item.active {
-  border-color: rgba(255, 88, 79, 0.55);
-  background: linear-gradient(90deg, rgba(225, 6, 0, 0.3), rgba(225, 6, 0, 0.1));
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--accent) 30%, transparent),
+    color-mix(in srgb, var(--accent) 10%, transparent)
+  );
 }
 
 .sidebar-footer {
@@ -249,15 +260,15 @@ body {
 }
 
 .badge-online {
-  color: #b8ffd6;
-  border-color: rgba(38, 194, 129, 0.7);
-  background: rgba(38, 194, 129, 0.18);
+  color: color-mix(in srgb, var(--success) 58%, white 42%);
+  border-color: color-mix(in srgb, var(--success) 70%, transparent);
+  background: color-mix(in srgb, var(--success) 18%, transparent);
 }
 
 .badge-offline {
-  color: #ffd2cf;
-  border-color: rgba(225, 6, 0, 0.7);
-  background: rgba(225, 6, 0, 0.15);
+  color: color-mix(in srgb, var(--danger) 38%, white 62%);
+  border-color: color-mix(in srgb, var(--danger) 70%, transparent);
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
 }
 
 .badge.success {
@@ -1520,13 +1531,22 @@ body {
 }
 
 .btn-primary {
-  border-color: #b11714;
-  background: linear-gradient(180deg, #f20d07 0%, #d30702 52%, #8e0603 100%);
+  border-color: color-mix(in srgb, var(--accent) 72%, black 28%);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--accent) 78%, white 22%) 0%,
+    var(--accent) 52%,
+    color-mix(in srgb, var(--accent) 64%, black 36%) 100%
+  );
 }
 
 .btn-danger {
-  border-color: #843137;
-  background: linear-gradient(180deg, #8f222a, #66181e);
+  border-color: color-mix(in srgb, var(--danger) 62%, black 38%);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--danger) 72%, black 28%),
+    color-mix(in srgb, var(--danger) 52%, black 48%)
+  );
 }
 
 .btn-mini {
@@ -1592,8 +1612,8 @@ body {
 }
 
 .btn.is-active {
-  border-color: #d30702;
-  box-shadow: inset 0 0 0 1px rgba(242, 13, 7, 0.25);
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
 }
 
 .race-wizard-steps,
@@ -1636,14 +1656,14 @@ body {
 }
 
 .wizard-step-active {
-  border-color: rgba(225, 6, 0, 0.55);
-  background: rgba(225, 6, 0, 0.08);
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
 }
 
 .wizard-step-complete span,
 .wizard-step-active span {
-  border-color: #d30702;
-  background: rgba(225, 6, 0, 0.16);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
 }
 
 .manage-step-card p {
@@ -1663,14 +1683,14 @@ body {
 }
 
 .manage-step-card-link:hover {
-  border-color: rgba(225, 6, 0, 0.32);
+  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
   transform: translateY(-1px);
 }
 
 .manage-step-card-link:focus-visible {
   outline: none;
-  border-color: rgba(225, 6, 0, 0.52);
-  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.12);
+  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
 }
 
 .status-chip {
@@ -1789,8 +1809,8 @@ body {
 
 .race-format-context-card {
   grid-column: span 2;
-  border-color: rgba(225, 6, 0, 0.22);
-  background: rgba(225, 6, 0, 0.06);
+  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
+  background: color-mix(in srgb, var(--accent) 6%, transparent);
 }
 
 .race-preset-actions-card-compact .actions-inline {
@@ -1928,8 +1948,8 @@ select {
 input:focus,
 select:focus {
   outline: none;
-  border-color: #6578a4;
-  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.18);
+  border-color: color-mix(in srgb, var(--accent-2) 62%, var(--line));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent);
 }
 
 .log-box {
@@ -2270,7 +2290,7 @@ select:focus {
 }
 
 .data-table tr.judge-selected-row td {
-  background: rgba(225, 6, 0, 0.08);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
 }
 
 .grid-editor-toolbar {
@@ -2306,8 +2326,8 @@ select:focus {
 }
 
 .drag-item-over {
-  border-color: rgba(225, 6, 0, 0.8);
-  background: rgba(225, 6, 0, 0.12);
+  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
 }
 
 .logo-preview {
@@ -3198,7 +3218,7 @@ select:focus {
 }
 
 .overlay-prediction-late {
-  background: linear-gradient(90deg, #ffd0d0, #e10600);
+  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 24%, white), var(--danger));
   animation: overlayPredictionLatePulse 1.1s ease-in-out infinite;
 }
 
@@ -3308,8 +3328,8 @@ select:focus {
   border: 1px solid var(--line);
   border-radius: 16px;
   background:
-    linear-gradient(180deg, rgba(225, 6, 0, 0.08), transparent 20%),
-    linear-gradient(180deg, #131a28 0%, #101724 100%);
+    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 20%),
+    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
   box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
 }