:root {--color-theme-primary: #000000;--color-theme-secondary: #ffffff;--color-theme-background: #1c1917;--color-theme-surface: #d6d3d1;--color-theme-text_primary: #ffffff;--color-theme-text_secondary: #a8a29e;--color-theme-text_muted: #78716c;--color-server-eu10x-primary: #f87171;--color-server-eu10x-secondary: #fdba74;--color-server-eu10x-text: #7f1d1d;--color-server-eu10x-hover_text: #000000;--color-server-eu10x-border: #dc2626;--color-server-eu10x-background: #dc26261a;--color-server-eu5x-primary: #60a5fa;--color-server-eu5x-secondary: #67e8f9;--color-server-eu5x-text: #1e3a8a;--color-server-eu5x-hover_text: #000000;--color-server-eu5x-border: #3b82f6;--color-server-eu5x-background: #3b82f61a;--color-server-eu3x-primary: #4ade80;--color-server-eu3x-secondary: #6ee7b7;--color-server-eu3x-text: #14532d;--color-server-eu3x-hover_text: #000000;--color-server-eu3x-border: #22c55e;--color-server-eu3x-background: #22c55e1a;--color-status-online: #22c55e;--color-status-offline: #ef4444;--color-status-maintenance: #f59e0b;--color-status-warning: #fbbf24;--color-status-error: #dc2626;--color-status-info: #3b82f6;--color-ui-border: #ffffff1a;--color-ui-border_strong: #00000080;--color-ui-overlay: #00000080;--color-ui-overlay_light: #ffffff1a;--color-ui-shadow: #000000;--color-ui-selection_bg: #000000;--color-ui-selection_text: #f5f5f4;--color-scrollbar-thumb: #78716c;--color-scrollbar-track: #a8a29e;--color-rank-rank_1-border: #eab308;--color-rank-rank_1-background: #eab3081a;--color-rank-rank_2-border: #9ca3af;--color-rank-rank_2-background: #9ca3af1a;--color-rank-rank_3-border: #9a3412;--color-rank-rank_3-background: #9a34121a;--color-social-discord: #5865f2;--color-social-steam: #171a21;--color-social-youtube: #ff0000;--color-social-twitter: #1da1f2;--color-social-facebook: #1877f2;--color-social-instagram: #e4405f;--color-social-tiktok: #000000;}/* Server eu10x gradient styles */
.eu10x-gradient {background: linear-gradient(to right, #f87171, #fdba74) !important;color: #7f1d1d !important;transition: all 0.2s ease;}
.eu10x-gradient:hover {background: linear-gradient(to left, #f87171, #fdba74) !important;color: #000000 !important;transform: translateY(-1px);}
.bg-gradient-to-r.from-red-500.to-orange-500 {background: linear-gradient(to right, #f87171, #fdba74) !important;}
/* Server eu5x gradient styles */
.eu5x-gradient {background: linear-gradient(to right, #60a5fa, #67e8f9) !important;color: #1e3a8a !important;transition: all 0.2s ease;}
.eu5x-gradient:hover {background: linear-gradient(to left, #60a5fa, #67e8f9) !important;color: #000000 !important;transform: translateY(-1px);}
.bg-gradient-to-r.from-blue-500.to-cyan-500 {background: linear-gradient(to right, #60a5fa, #67e8f9) !important;}
/* Server eu3x gradient styles */
.eu3x-gradient {background: linear-gradient(to right, #4ade80, #6ee7b7) !important;color: #14532d !important;transition: all 0.2s ease;}
.eu3x-gradient:hover {background: linear-gradient(to left, #4ade80, #6ee7b7) !important;color: #000000 !important;transform: translateY(-1px);}
.bg-gradient-to-r.from-green-500.to-emerald-500 {background: linear-gradient(to right, #4ade80, #6ee7b7) !important;}

/* Custom Color Classes */
.color-theme-primary { color: var(--color-theme-primary); }
.color-theme-secondary { color: var(--color-theme-secondary); }
.color-theme-background { background-color: var(--color-theme-background); }
.color-theme-surface { background-color: var(--color-theme-surface); }
.color-theme-text-primary { color: var(--color-theme-text-primary); }
.color-theme-text-secondary { color: var(--color-theme-text-secondary); }
.color-theme-text-muted { color: var(--color-theme-text-muted); }

/* Server Color Classes - Generated Dynamically */
.color-server-eu10x-primary { color: var(--color-server-eu10x-primary); }
.color-server-eu10x-secondary { color: var(--color-server-eu10x-secondary); }
.color-server-eu10x-text { color: var(--color-server-eu10x-text); }
.color-server-eu10x-border { border-color: var(--color-server-eu10x-border); }
.color-server-eu10x-bg { background-color: var(--color-server-eu10x-background); }

.color-server-eu5x-primary { color: var(--color-server-eu5x-primary); }
.color-server-eu5x-secondary { color: var(--color-server-eu5x-secondary); }
.color-server-eu5x-text { color: var(--color-server-eu5x-text); }
.color-server-eu5x-border { border-color: var(--color-server-eu5x-border); }
.color-server-eu5x-bg { background-color: var(--color-server-eu5x-background); }

.color-server-eu3x-primary { color: var(--color-server-eu3x-primary); }
.color-server-eu3x-secondary { color: var(--color-server-eu3x-secondary); }
.color-server-eu3x-text { color: var(--color-server-eu3x-text); }
.color-server-eu3x-border { border-color: var(--color-server-eu3x-border); }
.color-server-eu3x-bg { background-color: var(--color-server-eu3x-background); }


/* Status Color Classes */
.color-status-online { color: var(--color-status-online); }
.color-status-offline { color: var(--color-status-offline); }
.color-status-maintenance { color: var(--color-status-maintenance); }
.color-status-warning { color: var(--color-status-warning); }
.color-status-error { color: var(--color-status-error); }
.color-status-info { color: var(--color-status-info); }

/* UI Color Classes */
.color-ui-border { border-color: var(--color-ui-border); }
.color-ui-border-strong { border-color: var(--color-ui-border-strong); }
.color-ui-overlay { background-color: var(--color-ui-overlay); }
.color-ui-overlay-light { background-color: var(--color-ui-overlay-light); }
.color-ui-shadow { box-shadow: 0 0 0 1px var(--color-ui-shadow); }

/* Scrollbar Color Classes */
.color-scrollbar-thumb { background-color: var(--color-scrollbar-thumb); }
.color-scrollbar-track { background-color: var(--color-scrollbar-track); }

/* Rank Color Classes */
.color-rank-1-border { border-color: var(--color-rank-rank_1-border); }
.color-rank-1-bg { background-color: var(--color-rank-rank_1-background); }
.color-rank-2-border { border-color: var(--color-rank-rank_2-border); }
.color-rank-2-bg { background-color: var(--color-rank-rank_2-background); }
.color-rank-3-border { border-color: var(--color-rank-rank_3-border); }
.color-rank-3-bg { background-color: var(--color-rank-rank_3-background); }

/* Override Tailwind colors with CSS variables */
.bg-stone-900 { background-color: var(--color-theme-background) !important; }
.text-stone-300 { color: var(--color-theme-surface) !important; }
.text-stone-400 { color: var(--color-theme-text-secondary) !important; }
.text-stone-500 { color: var(--color-theme-text-muted) !important; }
.text-white { color: var(--color-theme-text-primary) !important; }
.text-black { color: var(--color-theme-primary) !important; }
.bg-black { background-color: var(--color-theme-primary) !important; }
.bg-white { background-color: var(--color-theme-secondary) !important; }
.border-white\/10 { border-color: var(--color-ui-border) !important; }
.bg-white\/10 { background-color: var(--color-ui-overlay-light) !important; }
.bg-white\/20 { background-color: var(--color-ui-overlay-light) !important; }

/* Server-specific color overrides - Generated Dynamically */
.text-red-400 { color: var(--color-server-eu10x-primary) !important; }
.border-red-400 { border-color: var(--color-server-eu10x-primary) !important; }
.bg-red-600\/10 { background-color: var(--color-server-eu10x-background) !important; }
.text-blue-400 { color: var(--color-server-eu5x-primary) !important; }
.border-blue-400 { border-color: var(--color-server-eu5x-primary) !important; }
.bg-blue-600\/10 { background-color: var(--color-server-eu5x-background) !important; }
.text-green-400 { color: var(--color-server-eu3x-primary) !important; }
.border-green-400 { border-color: var(--color-server-eu3x-primary) !important; }
.bg-green-600\/10 { background-color: var(--color-server-eu3x-background) !important; }