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

src/app/admin/theme/page.tsx

@@ -17,6 +17,10 @@ const COLOR_FIELDS: { key: string; label: string; def: string }[] = [
   { key: "color_navbar_text", label: "Navbar text", def: "#1e293b" },
   { key: "color_text", label: "Text", def: "#0f172a" },
   { key: "color_text_muted", label: "Muted text", def: "#64748b" },
+  { key: "color_success", label: "Success", def: "#16a34a" },
+  { key: "color_warning", label: "Warning", def: "#eab308" },
+  { key: "color_error", label: "Error", def: "#ef4444" },
+  { key: "color_info", label: "Info", def: "#0ea5e9" },
 ];
 
 const BUTTON_FIELDS: { key: string; label: string; def: string }[] = [

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);
+  background: color-mix(in srgb, var(--color-success) 16%, transparent);
-  color: #15803d;
+  color: var(--color-success);
 }
 .online-dot {
   width: 8px;
@@ -702,8 +706,8 @@ tbody tr:hover {
   background: currentColor;
 }
 .online-badge.online .online-dot {
-  background: #16a34a;
+  background: var(--color-success);
-  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 22%, transparent);
+  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);
+  background: color-mix(in srgb, var(--color-warning) 20%, transparent);
-  border-color: #eab308;
+  border-color: var(--color-warning);
 }
 .rank-badge.rank-2 {
   background: color-mix(in srgb, #94a3b8 22%, transparent);

src/components/theme-vars.tsx

@@ -16,6 +16,10 @@ export async function ThemeVars() {
     text,
     textMuted,
     accent,
+    success,
+    warning,
+    error,
+    info,
     buttonColor,
     buttonText,
     buttonSecondary,
@@ -39,6 +43,10 @@ export async function ThemeVars() {
     g("color_text", "#0f172a"),
     g("color_text_muted", "#64748b"),
     g("color_accent", "#10b981"),
+    g("color_success", "#16a34a"),
+    g("color_warning", "#eab308"),
+    g("color_error", "#ef4444"),
+    g("color_info", "#0ea5e9"),
     g("button_primary_color", "#f59e0b"),
     g("button_text_color", "#1e293b"),
     g("button_secondary_color", "#22c55e"),
@@ -70,6 +78,10 @@ export async function ThemeVars() {
 --color-text:${safe(text, "#0f172a")};
 --color-text-muted:${safe(textMuted, "#64748b")};
 --color-accent:${safe(accent, "#10b981")};
+--color-success:${safe(success, "#16a34a")};
+--color-warning:${safe(warning, "#eab308")};
+--color-error:${safe(error, "#ef4444")};
+--color-info:${safe(info, "#0ea5e9")};
 --button-color:${safe(buttonColor, "#f59e0b")};
 --button-text-color:${safe(buttonText, "#1e293b")};
 --button-secondary-color:${safe(buttonSecondary, "#22c55e")};