Add 4 new theme colors (success, warning, error, info) with full preset support

src/app/globals.css

@@ -30,12 +30,16 @@
   --color-text: #0f172a;
   --color-text-muted: #6b7280;
   --color-accent: #10b981;
+  --color-success: #16a34a;
+  --color-warning: #eab308;
+  --color-error: #ef4444;
+  --color-info: #0ea5e9;
   --color-danger: #ef4444;
   --button-color: #eeb425;
   --button-text-color: #1a1a2e;
   --button-secondary-color: #22c55e;
   --button-secondary-text-color: #ffffff;
-  --button-secondary-hover-color: #16a34a;
+  --button-secondary-hover-color: var(--color-success);
   --button-danger-color: #ef4444;
   --button-danger-text-color: #ffffff;
   --button-danger-hover-color: #dc2626;
@@ -692,8 +696,8 @@ tbody tr:hover {
   color: var(--color-text-muted);
 }
 .online-badge.online {
-  background: color-mix(in srgb, #16a34a 16%, transparent);
-  color: #15803d;
+  background: color-mix(in srgb, var(--color-success) 16%, transparent);
+  color: var(--color-success);
 }
 .online-dot {
   width: 8px;
@@ -702,8 +706,8 @@ tbody tr:hover {
   background: currentColor;
 }
 .online-badge.online .online-dot {
-  background: #16a34a;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 22%, transparent);
+  background: var(--color-success);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent);
 }
 
 /* Leaderboard rank chip */
@@ -720,8 +724,8 @@ tbody tr:hover {
   border: 1px solid color-mix(in srgb, var(--color-text-muted) 18%, transparent);
 }
 .rank-badge.rank-1 {
-  background: color-mix(in srgb, #eab308 20%, transparent);
-  border-color: #eab308;
+  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
+  border-color: var(--color-warning);
 }
 .rank-badge.rank-2 {
   background: color-mix(in srgb, #94a3b8 22%, transparent);