/* Custom Colors */
:root {
    --color-primary: #4f46e5;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-warning: #f59e0b;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-success: #10b981;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-info: #0ea5e9;
    --color-indigo-600: #4f46e5;
    --color-pink-500: #ec4899;
    --color-pink-600: #db2777;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-fuchsia-400: #e879f9;
    --color-fuchsia-600: #c026d3;
}

/* Gradient Backgrounds */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* From-To Gradient Combinations */
.from-primary.to-purple-500 {
    --tw-gradient-from: var(--color-primary);
    --tw-gradient-to: var(--color-purple-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary.to-purple-600 {
    --tw-gradient-from: var(--color-primary);
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-info.to-blue-500 {
    --tw-gradient-from: var(--color-info);
    --tw-gradient-to: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-info.to-blue-600 {
    --tw-gradient-from: var(--color-info);
    --tw-gradient-to: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-warning.to-orange-500 {
    --tw-gradient-from: var(--color-warning);
    --tw-gradient-to: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-warning.to-orange-600 {
    --tw-gradient-from: var(--color-warning);
    --tw-gradient-to: var(--color-orange-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-success.to-green-500 {
    --tw-gradient-from: var(--color-success);
    --tw-gradient-to: var(--color-green-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-success.to-green-600 {
    --tw-gradient-from: var(--color-success);
    --tw-gradient-to: var(--color-green-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Additional Gradient Combinations from games.php */
.from-purple-500.to-indigo-600 {
    --tw-gradient-from: var(--color-purple-500);
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-500.to-rose-500 {
    --tw-gradient-from: var(--color-pink-500);
    --tw-gradient-to: var(--color-rose-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-fuchsia-600.to-rose-500 {
    --tw-gradient-from: var(--color-fuchsia-600);
    --tw-gradient-to: var(--color-rose-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-400.via-blue-500.to-fuchsia-400 {
    --tw-gradient-from: var(--color-green-500);
    --tw-gradient-to: var(--color-fuchsia-400);
    --tw-gradient-via: var(--color-blue-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}

/* Dark Mode Variants */
.dark .dark\:from-primary.dark\:to-purple-600 {
    --tw-gradient-from: var(--color-primary);
    --tw-gradient-to: var(--color-purple-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:from-info.dark\:to-blue-600 {
    --tw-gradient-from: var(--color-info);
    --tw-gradient-to: var(--color-blue-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:from-warning.dark\:to-orange-600 {
    --tw-gradient-from: var(--color-warning);
    --tw-gradient-to: var(--color-orange-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:from-success.dark\:to-green-600 {
    --tw-gradient-from: var(--color-success);
    --tw-gradient-to: var(--color-green-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Dark Mode Variants from games.php */
.dark .dark\:from-purple-600.dark\:to-indigo-700 {
    --tw-gradient-from: var(--color-purple-600);
    --tw-gradient-to: var(--color-indigo-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:from-pink-600.dark\:to-rose-600 {
    --tw-gradient-from: var(--color-pink-600);
    --tw-gradient-to: var(--color-rose-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:from-fuchsia-600.dark\:to-rose-500 {
    --tw-gradient-from: var(--color-fuchsia-600);
    --tw-gradient-to: var(--color-rose-500);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:from-green-600.dark\:to-emerald-600 {
    --tw-gradient-from: var(--color-green-600);
    --tw-gradient-to: var(--color-green-600);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Additional Color Classes */
.text-primary {
    color: var(--color-primary);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-warning {
    background-color: var(--color-warning);
}