fixa overlay tema

src/styles.css

@@ -1192,9 +1192,9 @@ select:focus {
   min-height: 100vh;
   padding: 10px;
   background:
-    radial-gradient(circle at 15% 0%, rgba(225, 6, 0, 0.18), transparent 30%),
-    radial-gradient(circle at 100% 80%, rgba(37, 59, 103, 0.22), transparent 30%),
-    linear-gradient(160deg, #05070b 0%, #090d16 55%, #07090e 100%);
+    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
+    radial-gradient(circle at 100% 80%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 30%),
+    linear-gradient(160deg, color-mix(in srgb, var(--bg) 90%, #000 10%) 0%, var(--bg-soft) 55%, var(--bg) 100%);
 }
 
 .overlay-header {
@@ -1299,7 +1299,7 @@ select:focus {
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 28px;
-  background: rgba(7, 12, 20, 0.82);
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
   box-shadow: var(--shadow);
 }
 
@@ -1331,7 +1331,7 @@ select:focus {
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 10px;
-  background: rgba(7, 12, 20, 0.82);
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
   box-shadow: var(--shadow);
 }
 
@@ -1342,10 +1342,10 @@ select:focus {
 }
 
 .overlay-team-card {
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid color-mix(in srgb, var(--line) 82%, white 18%);
   border-radius: 12px;
   padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-card);
   display: grid;
   gap: 6px;
 }
@@ -1361,8 +1361,8 @@ select:focus {
 }
 
 .overlay-team-card-1 {
-  border-color: rgba(225, 6, 0, 0.45);
-  background: linear-gradient(135deg, rgba(225, 6, 0, 0.12), rgba(255, 255, 255, 0.03));
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--surface-card));
 }
 
 .overlay-table-wrap,
@@ -1370,7 +1370,7 @@ select:focus {
 .overlay-empty {
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: rgba(7, 12, 20, 0.82);
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
   box-shadow: var(--shadow);
 }
 
@@ -1387,7 +1387,7 @@ select:focus {
 .overlay-leaderboard-card {
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: rgba(7, 12, 20, 0.9);
+  background: color-mix(in srgb, var(--panel) 90%, transparent);
   box-shadow: var(--shadow);
 }
 
@@ -1398,8 +1398,8 @@ select:focus {
   gap: 6px;
   padding: 6px 8px;
   background:
-    linear-gradient(135deg, rgba(225, 6, 0, 0.18), rgba(225, 6, 0, 0.04)),
-    rgba(7, 12, 20, 0.92);
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)),
+    color-mix(in srgb, var(--panel) 92%, transparent);
 }
 
 .overlay-fastest-banner span,
@@ -1497,7 +1497,7 @@ select:focus {
 .overlay-stat-card {
   border: 1px solid var(--line);
   border-radius: 16px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 85%, white 15%), var(--surface-soft));
   padding: 14px 16px;
 }
 
@@ -1573,14 +1573,14 @@ select:focus {
   gap: 4px;
   align-items: center;
   padding: 4px 5px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid color-mix(in srgb, var(--line) 84%, white 16%);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--surface-card);
 }
 
 .overlay-race-row-leader {
-  border-color: rgba(225, 6, 0, 0.45);
-  background: linear-gradient(135deg, rgba(225, 6, 0, 0.12), rgba(255, 255, 255, 0.03));
+  border-color: color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--surface-card));
 }
 
 .overlay-race-row-invalid {
@@ -1611,7 +1611,7 @@ select:focus {
 .overlay-invalid-note {
   display: block;
   margin-top: 2px;
-  color: #ffbe98;
+  color: color-mix(in srgb, var(--warn) 75%, white 25%);
   font-size: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -1643,7 +1643,7 @@ select:focus {
   max-width: 122px;
   border-radius: 999px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.08);
+  background: color-mix(in srgb, var(--line) 58%, white 42%);
 }
 
 .overlay-prediction-fill {
@@ -1725,7 +1725,7 @@ select:focus {
 }
 
 .best {
-  color: #dfb9ff;
+  color: color-mix(in srgb, var(--accent-2) 50%, white 50%);
   font-weight: 700;
 }
 
@@ -1736,7 +1736,7 @@ select:focus {
 }
 
 .error {
-  color: #ffb5b5;
+  color: color-mix(in srgb, var(--accent) 56%, white 44%);
   min-height: 18px;
 }
 
@@ -1745,16 +1745,16 @@ select:focus {
   display: inline-block;
   padding: 6px 10px;
   border-radius: 8px;
-  border: 1px solid rgba(225, 6, 0, 0.7);
-  background: rgba(225, 6, 0, 0.2);
-  color: #ffd6d4;
+  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: color-mix(in srgb, var(--accent) 45%, white 55%);
   font-weight: 700;
 }
 
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(4, 7, 12, 0.76);
+  background: color-mix(in srgb, var(--bg) 78%, transparent);
   backdrop-filter: blur(6px);
   display: flex;
   align-items: center;