:root {
    --bg-light: #f8f9fa;
    --bg-dark: #101828;
    --brand-dark-blue: #0c2a3a;
    --brand-accent-blue: #58c0e7;
    --text-dark: #1f2937;
    --text-light: #f8f9fa;
    --text-muted: #6b7280;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}


.bg-brand-dark {
    background-color: var(--brand-dark-blue);
}

.bg-dark {
    background-color: var(--bg-dark);
}

.bg-brand-accent {
    background-color: var(--brand-accent-blue);
}

.bg-brand-accent.nav-active {
    color: var(--text-dark) !important;
}

.text-brand-dark {
    color: var(--text-dark);
}

.text-dark {
    color: var(--text-dark);
}

.text-brand-accent,
.nav-active {
    color: var(--brand-accent-blue) !important;
}

.border-brand-accent {
    border-color: var(--brand-accent-blue);
}

.ring-brand-accent {
    --tw-ring-color: var(--brand-accent-blue);
}

nav a:not(.nav-button):hover {
    color: var(--brand-accent-blue);
}

.transition-max-height {
    transition: max-height 0.5s ease-in-out;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    min-height: 520px;
}

@media (min-width: 768px) {
    .chart-container {
        min-height: 450px;
    }
}

.slide {
    transition: opacity 1.5s ease-in-out;
}