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

:root {
    --color-theme-primary: #0d9488;
    --color-theme-light: #2dd4bf;
    --color-theme-dark: #134e4a;
}

.dark {
    --color-theme-primary: #0d9488;
    --color-theme-light: #2dd4bf;
    --color-theme-dark: #134e4a;
}

/* 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: #0d9488 !important;
}

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

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

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

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

.hover\:border-teal-800:hover {
    border-color: #134e4a !important;
}

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

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

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

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

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

/* Override button variants that use teal */
button.bg-teal-800, [data-flux-button].bg-teal-800 {
    background-color: #134e4a !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: #134e4a !important;
    }
}

/* Flux Button Specific Overrides */
button[data-flux-button][data-variant="primary"],
[data-flux-button][data-variant="primary"] {
    background-color: #0d9488 !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: #2dd4bf !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: #0d9488 !important;
    outline: 2px solid #2dd4bf !important;
    outline-offset: 2px !important;
}

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

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

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

/* Flux Outline Button Overrides */
[data-flux-button][data-variant="outline"] {
    border: 2px solid #0d9488 !important;
    background-color: #f3f4f6 !important;
    color: #0d9488 !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: #2dd4bf !important;
    border-color: #0d9488 !important;
}

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

[data-flux-button][data-variant="outline"]:focus {
    outline: 2px solid #2dd4bf !important;
    outline-offset: 2px !important;
}