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);
-  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);

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")};

src/lib/theme-presets.ts

@@ -36,6 +36,10 @@ export const THEME_COLOR_KEYS = [
   "color_text",
   "color_text_muted",
   "color_accent",
+  "color_success",
+  "color_warning",
+  "color_error",
+  "color_info",
   "button_primary_color",
   "button_text_color",
   "border_color",
@@ -54,6 +58,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#0f172a",
     color_text_muted: "#64748b",
     color_accent: "#10b981",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#f59e0b",
     button_text_color: "#1e293b",
     border_color: "#eeb425",
@@ -68,6 +76,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#e5e7eb",
     color_text_muted: "#9ca3af",
     color_accent: "#22c55e",
+    color_success: "#22c55e",
+    color_warning: "#facc15",
+    color_error: "#f87171",
+    color_info: "#38bdf8",
     button_primary_color: "#eeb425",
     button_text_color: "#1a1a2e",
     border_color: "#eeb425",
@@ -82,6 +94,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#082f49",
     color_text_muted: "#64748b",
     color_accent: "#14b8a6",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#0ea5e9",
     button_text_color: "#ffffff",
     border_color: "#38bdf8",
@@ -96,6 +112,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#052e16",
     color_text_muted: "#5f6b63",
     color_accent: "#84cc16",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#16a34a",
     button_text_color: "#ffffff",
     border_color: "#22c55e",
@@ -110,6 +130,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#431407",
     color_text_muted: "#78716c",
     color_accent: "#ec4899",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#f97316",
     button_text_color: "#ffffff",
     border_color: "#fb923c",
@@ -124,6 +148,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#500724",
     color_text_muted: "#9d6b80",
     color_accent: "#a855f7",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#ec4899",
     button_text_color: "#ffffff",
     border_color: "#f472b6",
@@ -138,6 +166,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#e9e5ff",
     color_text_muted: "#a39dcf",
     color_accent: "#22d3ee",
+    color_success: "#22c55e",
+    color_warning: "#facc15",
+    color_error: "#f87171",
+    color_info: "#38bdf8",
     button_primary_color: "#a855f7",
     button_text_color: "#ffffff",
     border_color: "#7c3aed",
@@ -152,6 +184,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#1e1b4b",
     color_text_muted: "#636681",
     color_accent: "#d97706",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#4f46e5",
     button_text_color: "#ffffff",
     border_color: "#818cf8",
@@ -166,6 +202,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#f5e9ff",
     color_text_muted: "#b08fd6",
     color_accent: "#ff2a6d",
+    color_success: "#22c55e",
+    color_warning: "#facc15",
+    color_error: "#f87171",
+    color_info: "#38bdf8",
     button_primary_color: "#ff2a6d",
     button_text_color: "#ffffff",
     border_color: "#05d9e8",
@@ -180,6 +220,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#e8ffe8",
     color_text_muted: "#7fae7f",
     color_accent: "#ff00ff",
+    color_success: "#22c55e",
+    color_warning: "#facc15",
+    color_error: "#f87171",
+    color_info: "#38bdf8",
     button_primary_color: "#39ff14",
     button_text_color: "#0a0a0a",
     border_color: "#39ff14",
@@ -194,6 +238,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#3f2d1c",
     color_text_muted: "#8a7560",
     color_accent: "#15803d",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#a16207",
     button_text_color: "#ffffff",
     border_color: "#ca8a04",
@@ -208,6 +256,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#0e3a4f",
     color_text_muted: "#5b7585",
     color_accent: "#6366f1",
+    color_success: "#16a34a",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#0891b2",
     button_text_color: "#ffffff",
     border_color: "#67e8f9",
@@ -222,6 +274,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#14321f",
     color_text_muted: "#5f7a68",
     color_accent: "#15803d",
+    color_success: "#22c55e",
+    color_warning: "#eab308",
+    color_error: "#ef4444",
+    color_info: "#0ea5e9",
     button_primary_color: "#dc2626",
     button_text_color: "#ffffff",
     border_color: "#16a34a",
@@ -236,6 +292,10 @@ export const PRESETS: Record<string, Record<string, string>> = {
     color_text: "#dfe5ef",
     color_text_muted: "#94a0b5",
     color_accent: "#5eb0c9",
+    color_success: "#22c55e",
+    color_warning: "#facc15",
+    color_error: "#f87171",
+    color_info: "#38bdf8",
     button_primary_color: "#e8a33d",
     button_text_color: "#1b2230",
     border_color: "#e8a33d",