body {
    background-color: var(--color-soft);
    background-image: none;
    color: var(--color-ink);
}

::selection {
    background: var(--lv-cerulean-200);
    color: var(--color-ink);
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

h1,
.text-3xl,
.text-4xl,
.text-6xl,
.sm\:text-8xl {
    letter-spacing: 0;
}

.text-3xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

.text-4xl,
.sm\:text-4xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
}

.text-6xl,
.sm\:text-8xl {
    font-size: 2.75rem !important;
    line-height: 1 !important;
}

.rounded-\[1\.4rem\],
.rounded-\[1\.75rem\],
.rounded-\[2rem\],
.rounded-3xl {
    border-radius: .875rem !important;
}

.rounded-2xl,
.rounded-xl,
.rounded-full {
    border-radius: .625rem !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
[class*="shadow-"] {
    box-shadow: var(--shadow-soft) !important;
}

.bg-brandblue,
.bg-brandink {
    background-color: var(--color-primary) !important;
}

.text-brandblue,
.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--color-primary) !important;
}

.text-violet-600,
.text-violet-700,
.text-purple-700,
.text-pink-600,
.text-pink-700 {
    color: var(--color-petal) !important;
}

.text-amber-600,
.text-amber-700,
.text-orange-600,
.text-orange-700 {
    color: var(--lv-orange-700) !important;
}

.text-emerald-600,
.text-emerald-700,
.text-green-600,
.text-green-700 {
    color: var(--color-success) !important;
}

.text-red-600,
.text-red-700 {
    color: var(--color-danger) !important;
}

.text-brandink {
    color: var(--color-ink) !important;
}

.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700 {
    color: var(--color-muted) !important;
}

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

main h1 {
    color: var(--color-primary) !important;
}

main .dashboard-hero h1 {
    color: var(--lv-surface) !important;
}

.border-slate-100,
.border-slate-200,
.border-slate-300 {
    border-color: var(--color-border) !important;
}

.bg-slate-50 {
    background-color: var(--lv-surface-soft) !important;
}

.bg-brandsage,
.bg-blue-50,
.bg-blue-100 {
    background-color: var(--lv-page) !important;
}

.bg-violet-50,
.bg-violet-100,
.bg-purple-50,
.bg-pink-50,
.bg-pink-100 {
    background-color: var(--lv-petal-50) !important;
}

.bg-amber-50,
.bg-amber-100,
.bg-orange-50,
.bg-orange-100 {
    background-color: var(--lv-orange-50) !important;
}

.bg-emerald-50,
.bg-emerald-100,
.bg-green-50,
.bg-green-100,
.bg-sage-green-50,
.bg-sage-green-100 {
    background-color: var(--lv-sage-50) !important;
}

.bg-red-50,
.bg-red-100 {
    background-color: var(--lv-terracotta-50) !important;
}

.bg-amber-500,
.bg-orange-500 {
    background-color: var(--color-accent) !important;
}

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

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

.bg-violet-500,
.bg-violet-600,
.bg-purple-500,
.bg-purple-600 {
    background-color: var(--color-petal) !important;
}

.bg-cyan-400,
.bg-slate-100 {
    background-color: var(--lv-page) !important;
}

.border-blue-100,
.border-blue-200 {
    border-color: var(--lv-cerulean-200) !important;
}

.border-violet-200,
.border-purple-200,
.border-pink-200 {
    border-color: var(--lv-petal-200) !important;
}

.border-amber-200,
.border-orange-200 {
    border-color: var(--lv-orange-200) !important;
}

.border-emerald-200,
.border-green-200 {
    border-color: var(--lv-sage-200) !important;
}

.border-red-200 {
    border-color: var(--lv-terracotta-200) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-brandblue:hover {
    background-color: var(--color-primary-hover) !important;
    color: var(--lv-surface) !important;
    transform: none !important;
}

.hover\:bg-violet-50:hover,
.hover\:bg-blue-100:hover,
.hover\:border-blue-200:hover,
.hover\:border-violet-200:hover {
    background-color: var(--lv-page) !important;
    border-color: var(--color-border) !important;
    color: var(--color-ink) !important;
    transform: none !important;
}

.hover\:bg-amber-600:hover,
.hover\:bg-orange-600:hover {
    background-color: var(--lv-orange-600) !important;
    color: var(--lv-surface) !important;
}

.hover\:bg-emerald-700:hover,
.hover\:bg-green-700:hover {
    background-color: var(--lv-sage-700) !important;
    color: var(--lv-surface) !important;
}

.hover\:bg-red-700:hover {
    background-color: var(--lv-terracotta-700) !important;
    color: var(--lv-surface) !important;
}

.hover\:-translate-y-0\.5:hover,
.hover\:-translate-y-1:hover,
.group-hover\:translate-x-1 {
    transform: none !important;
}

.bg-gradient-to-br,
.from-brandink,
.from-slate-900,
.from-blue-500,
.via-brandblue,
.via-blue-950,
.to-brandblue,
.to-blue-800,
.to-cyan-400 {
    background-image: none !important;
}

.bg-gradient-to-br {
    background-color: var(--color-primary) !important;
}

main > section.relative > .absolute,
main .space-y-6 > section.relative > .absolute {
    display: none !important;
}

@media (max-width: 639px) {
    .nav-item-label {
        display: none;
    }

    .mobile-nav-panel .nav-item-label {
        display: inline;
    }

    .mobile-nav-panel > a {
        width: 100%;
        border-radius: 0.75rem;
        padding: 0.75rem;
    }
}