html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
.bg-slate-100 {
    background-color: var(--color-light-bg) !important;
    color: var(--color-light-text) !important;
}

.bg-white,
.bg-slate-50 {
    background-color: var(--color-light-panel) !important;
}

.border-slate-200,
.border-slate-300,
.divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-light-border) !important;
}

.bg-emerald-600,
.bg-emerald-500 {
    background-color: var(--color-primary) !important;
}

.text-emerald-700 {
    color: var(--color-primary) !important;
}

.border-emerald-300,
.border-emerald-500,
.focus\:border-emerald-500:focus,
.hover\:border-emerald-300:hover {
    border-color: var(--color-primary) !important;
}

.ring-emerald-500\/20 {
    --tw-ring-color: color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

.text-emerald-600,
.text-emerald-800,
.text-emerald-900,
.text-emerald-950 {
    color: var(--color-primary) !important;
}

.dark body,
.dark .bg-slate-100 {
    background-color: var(--color-dark-bg) !important;
    color: var(--color-dark-text) !important;
}

.dark .bg-white,
.dark .bg-slate-50 {
    background-color: var(--color-dark-panel) !important;
    color: var(--color-dark-text) !important;
}

.dark .bg-slate-950 {
    background-color: #020617 !important;
}

.dark .border-slate-200,
.dark .border-slate-300,
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-dark-border) !important;
}

.dark .text-slate-950,
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-700,
.dark .text-slate-600 {
    color: var(--color-dark-text) !important;
}

.dark .text-slate-500,
.dark .text-slate-400 {
    color: #94a3b8 !important;
}

.dark input,
.dark select,
.dark textarea {
    background-color: var(--color-dark-bg) !important;
    color: var(--color-dark-text) !important;
    border-color: var(--color-dark-border) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #94a3b8 !important;
}

.dark table thead,
.dark .bg-slate-100 {
    background-color: var(--color-dark-bg) !important;
}

.dark a.rounded,
.dark button.rounded,
.dark button.rounded-lg,
.dark a.rounded-lg {
    border-color: #64748b !important;
    color: #f8fafc !important;
}

.dark a.rounded:hover,
.dark button.rounded:hover,
.dark button.rounded-lg:hover,
.dark a.rounded-lg:hover {
    background-color: #1e293b !important;
    border-color: #94a3b8 !important;
    color: #ffffff !important;
}

.dark button:disabled,
.dark button[disabled],
.dark .opacity-50 {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.dark .bg-blue-600,
.dark .bg-emerald-600,
.dark .bg-amber-600,
.dark .bg-red-600 {
    color: #ffffff !important;
}

.dark .bg-blue-600:hover {
    background-color: #1d4ed8 !important;
}

.dark .bg-amber-600:hover {
    background-color: #b45309 !important;
}

.dark .bg-red-600:hover {
    background-color: #b91c1c !important;
}

.dark .bg-emerald-600:hover,
.dark .bg-emerald-500:hover {
    background-color: #047857 !important;
}

.dark .bg-slate-900,
.dark .hover\:bg-slate-800:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.dark .border-red-200.text-red-700,
.dark a.text-red-700 {
    border-color: #f87171 !important;
    color: #fecaca !important;
}

.dark .border-emerald-200.text-emerald-700,
.dark a.text-emerald-700 {
    border-color: #34d399 !important;
    color: #a7f3d0 !important;
}

.suggestion-panel {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.suggestion-item {
    color: #0f172a !important;
}

.suggestion-item:hover,
.suggestion-item:focus {
    background-color: #f1f5f9 !important;
    color: #020617 !important;
}

.suggestion-muted {
    color: #64748b !important;
}

.suggestion-message {
    color: #475569 !important;
}

.suggestion-error {
    color: #b91c1c !important;
}

.dark .suggestion-panel {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

.dark .suggestion-item {
    color: #f8fafc !important;
}

.dark .suggestion-item:hover,
.dark .suggestion-item:focus {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

.dark .suggestion-muted {
    color: #cbd5e1 !important;
}

.dark .suggestion-message {
    color: #cbd5e1 !important;
}

.dark .suggestion-error {
    color: #fecaca !important;
}

body.auth-page {
    background-color: #020617 !important;
    color: #0f172a !important;
}

body.auth-page .bg-white {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

body.auth-page .bg-emerald-600 {
    background-color: #059669 !important;
    color: #ffffff !important;
}

body.auth-page .hover\:bg-emerald-700:hover {
    background-color: #047857 !important;
}

body.auth-page .text-emerald-700 {
    color: #047857 !important;
}

body.auth-page .text-slate-950 {
    color: #020617 !important;
}

body.auth-page .text-slate-700 {
    color: #334155 !important;
}

body.auth-page .text-slate-600 {
    color: #475569 !important;
}

body.auth-page .border-slate-300 {
    border-color: #cbd5e1 !important;
}