/**
 * Surplusplug brand configuration
 * Primary: #530567 | Accent: #9B3DB5 | Dark: #2A0135 | Green: #3f6301 (logo tagline)
 */

:root {
    --brand-color: #530567;
    --brand-accent: #9b3db5;
    --brand-dark: #2a0135;
    --brand-green: #3f6301;
    --brand-green-light: #5a7d14;
    --brand-green-dark: #2f4a01;
    --brand: #530567;
    --brand-light: #9b3db5;
    --brand-rgb: 83, 5, 103;

    --brand-50: #faf5fc;
    --brand-100: #f3e8f8;
    --brand-200: #e6cff0;
    --brand-300: #d4a8e4;
    --brand-400: #b87ad0;
    --brand-500: var(--brand-color);
    --brand-600: var(--brand-color);
    --brand-700: var(--brand-dark);
    --brand-800: #1f0127;
    --brand-900: #140119;

    --brand-gradient: var(--brand-accent);
    --brand-gradient-start: var(--brand-color);
    --brand-gradient-end: var(--brand-gradient);

    --brand-hero-start: var(--brand-dark);
    --brand-hero-end: var(--brand-color);
}

/* Tailwind blue/purple utility overrides */
.bg-blue-50,   .bg-purple-50,   .bg-brand-50   { background-color: color-mix(in srgb, var(--brand-color) 6%,  white) !important; }
.bg-blue-100,  .bg-purple-100,  .bg-brand-100  { background-color: color-mix(in srgb, var(--brand-color) 12%, white) !important; }
.bg-blue-200,  .bg-purple-200,  .bg-brand-200  { background-color: color-mix(in srgb, var(--brand-color) 25%, white) !important; }
.bg-blue-300,  .bg-purple-300                  { background-color: color-mix(in srgb, var(--brand-color) 40%, white) !important; }
.bg-blue-400,  .bg-purple-400                  { background-color: color-mix(in srgb, var(--brand-color) 60%, white) !important; }
.bg-blue-500,  .bg-purple-500,  .bg-brand-500  { background-color: var(--brand-color) !important; }
.bg-blue-600,  .bg-purple-600,  .bg-brand-600  { background-color: var(--brand-color) !important; }
.bg-blue-700,  .bg-purple-700,  .bg-brand-700  { background-color: var(--brand-dark)  !important; }
.bg-blue-800,  .bg-purple-800,  .bg-brand-800  { background-color: color-mix(in srgb, var(--brand-dark) 85%, black) !important; }
.bg-blue-900,  .bg-purple-900,  .bg-brand-900  { background-color: color-mix(in srgb, var(--brand-dark) 70%, black) !important; }

.text-blue-500, .text-purple-500, .text-brand-500 { color: var(--brand-color) !important; }
.text-blue-600, .text-purple-600, .text-brand-600 { color: var(--brand-color) !important; }
.text-blue-700, .text-purple-700, .text-brand-700 { color: var(--brand-dark)  !important; }
.text-blue-800, .text-purple-800, .text-brand-800 { color: color-mix(in srgb, var(--brand-dark) 85%, black) !important; }

.border-blue-500,   .border-purple-500   { border-color: var(--brand-color) !important; }
.border-blue-600,   .border-purple-600,  .border-brand-600 { border-color: var(--brand-color) !important; }

.ring-blue-500,   .ring-purple-500,   .ring-brand-500   { --tw-ring-color: var(--brand-color) !important; }
.ring-blue-600,   .ring-purple-600,   .ring-brand-600   { --tw-ring-color: var(--brand-color) !important; }
.focus\:ring-blue-500:focus,   .focus\:ring-purple-500:focus   { --tw-ring-color: var(--brand-color) !important; }
.focus\:border-blue-500:focus, .focus\:border-purple-500:focus { border-color: var(--brand-color) !important; }

.from-blue-600, .from-purple-600, .from-brand { --tw-gradient-from: var(--brand-color) !important; }
.from-blue-700, .from-purple-700              { --tw-gradient-from: var(--brand-dark)  !important; }
.from-blue-800, .from-purple-800              { --tw-gradient-from: color-mix(in srgb, var(--brand-dark) 85%, black) !important; }
.from-blue-900, .from-purple-900              { --tw-gradient-from: color-mix(in srgb, var(--brand-dark) 70%, black) !important; }
.to-blue-500,   .to-purple-500                { --tw-gradient-to: var(--brand-color) !important; }
.to-blue-600,   .to-purple-600                { --tw-gradient-to: var(--brand-color) !important; }
.to-blue-700,   .to-purple-700, .to-brand     { --tw-gradient-to: var(--brand-dark)  !important; }
.to-blue-800,   .to-purple-800                { --tw-gradient-to: color-mix(in srgb, var(--brand-dark) 85%, black) !important; }

.hover\:bg-blue-600:hover,   .hover\:bg-purple-600:hover   { background-color: var(--brand-color) !important; }
.hover\:bg-blue-700:hover,   .hover\:bg-purple-700:hover   { background-color: var(--brand-dark)  !important; }
.hover\:text-blue-600:hover, .hover\:text-purple-600:hover { color: var(--brand-color) !important; }
.hover\:border-blue-600:hover, .hover\:border-purple-600:hover { border-color: var(--brand-color) !important; }

.group:hover .group-hover\:text-blue-600,   .group:hover .group-hover\:text-purple-600   { color: var(--brand-color) !important; }

.btn-gradient {
    background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end)) !important;
}

.hero-gradient {
    background: linear-gradient(135deg, var(--brand-hero-start), var(--brand-hero-end)) !important;
}