/* Dynamic Theme CSS - Generated for: red (red) */

:root {
    --color-theme-primary: #dc2626;
    --color-theme-light: #f87171;
    --color-theme-dark: #991b1b;
}

.dark {
    --color-theme-primary: #dc2626;
    --color-theme-light: #f87171;
    --color-theme-dark: #991b1b;
}

/* Override Flux accent color variables */
:root {
    --color-accent: var(--color-theme-primary);
    --color-accent-content: var(--color-theme-primary);
    --color-accent-foreground: var(--color-theme-dark);
}

.dark {
    --color-accent: var(--color-theme-primary);
    --color-accent-content: var(--color-theme-light);
    --color-accent-foreground: var(--color-theme-dark);
}

/* Override all hardcoded Teal classes with the active theme color */
.bg-teal-500, .bg-teal-600, .bg-teal-700, .bg-teal-800, .bg-teal-900 {
    background-color: #dc2626 !important;
}

.hover\:bg-teal-600:hover, .hover\:bg-teal-700:hover, .hover\:bg-teal-800:hover {
    background-color: #991b1b !important;
}

.text-teal-600, .text-teal-700, .text-teal-800, .text-teal-900 {
    color: #dc2626 !important;
}

.text-teal-400, .text-teal-500 {
    color: #f87171 !important;
}

.border-teal-600, .border-teal-700, .border-teal-800 {
    border-color: #dc2626 !important;
}

.hover\:border-teal-800:hover {
    border-color: #991b1b !important;
}

/* Dark mode teal overrides */
.dark .text-teal-600, .dark .text-teal-400 {
    color: #f87171 !important;
}

.dark .bg-teal-600, .dark .bg-teal-800 {
    background-color: #dc2626 !important;
}

.dark .border-teal-800 {
    border-color: #dc2626 !important;
}

/* Override emerald that might be used as secondary accent */
.bg-emerald-600, .bg-emerald-500 {
    background-color: #dc2626 !important;
}

.text-emerald-600, .text-emerald-500 {
    color: #dc2626 !important;
}

/* Override button variants that use teal */
button.bg-teal-800, [data-flux-button].bg-teal-800 {
    background-color: #991b1b !important;
}

/* Supports color-mix function for dynamic hover states */
@supports (color-mix(in oklab, #fff, #000)) {
    .hover\:bg-\[color-mix\(in_oklab\,_var\(--color-accent\)\,_transparent_10\%\)\]:hover {
        background-color: #991b1b !important;
    }
}

/* Flux Button Specific Overrides */
button[data-flux-button][data-variant="primary"],
[data-flux-button][data-variant="primary"] {
    background-color: #dc2626 !important;
    color: white !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

button[data-flux-button][data-variant="primary"]:hover,
[data-flux-button][data-variant="primary"]:hover {
    background-color: #f87171 !important;
    color: #1a1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

button[data-flux-button][data-variant="primary"]:focus,
[data-flux-button][data-variant="primary"]:focus {
    background-color: #dc2626 !important;
    outline: 2px solid #f87171 !important;
    outline-offset: 2px !important;
}

button[data-flux-button][data-variant="primary"]:active,
[data-flux-button][data-variant="primary"]:active {
    background-color: #991b1b !important;
}

/* Flux button color variables */
[data-flux-button] {
    --color-accent: #dc2626 !important;
    --color-accent-content: #dc2626 !important;
}

/* Button elements inherit theme */
button {
    --color-accent: #dc2626 !important;
}

/* Flux Outline Button Overrides */
[data-flux-button][data-variant="outline"] {
    border: 2px solid #dc2626 !important;
    background-color: #f3f4f6 !important;
    color: #dc2626 !important;
    transition: all 0.2s ease-in-out !important;
}

.dark [data-flux-button][data-variant="outline"] {
    background-color: #27272a !important;
}

[data-flux-button][data-variant="outline"]:hover {
    background-color: #f87171 !important;
    border-color: #dc2626 !important;
}

.dark [data-flux-button][data-variant="outline"]:hover {
    background-color: #3f3f46 !important;
}

[data-flux-button][data-variant="outline"]:focus {
    outline: 2px solid #f87171 !important;
    outline-offset: 2px !important;
}
/* When theme is red, make danger elements black */
[data-flux-button][data-variant="danger"],
button[data-flux-button][data-variant="danger"] {
    background-color: #000000 !important;
    color: white !important;
}

[data-flux-button][data-variant="danger"]:hover,
button[data-flux-button][data-variant="danger"]:hover {
    background-color: #1f2937 !important;
}

.bg-red-500, .bg-red-600, .bg-red-700 {
    background-color: #000000 !important;
}

.hover\:bg-red-600:hover, .hover\:bg-red-500:hover {
    background-color: #1f2937 !important;
}