@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Define Base Light Theme Variables */
:root {
    --bg-body: #f3f4f6;
    --bg-brand-dark: #1b4d4d;
    --bg-brand: #245c5c;
    --bg-brand-light: #3b8282;
}

/* Define Dark Theme Variables */
html.dark {
    --bg-body: #111827; /* Deep gray background */
    --bg-brand-dark: #113636;
    --bg-brand: #245c5c;
    --bg-brand-light: #4fd1c5; /* Brighter teal for better contrast in dark mode */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    transition: background-color 0.3s ease; /* Smooth fade when toggling */
}

/* Custom Teal Theme Colors */
.bg-brand-dark { background-color: var(--bg-brand-dark); }
.bg-brand { background-color: var(--bg-brand); }
.bg-brand-light { background-color: var(--bg-brand-light); }
.text-brand { color: var(--bg-brand); }
.border-brand { border-color: var(--bg-brand); }

/* Ensure modal overlays get darker in dark mode */
.modal-overlay {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.4);
}
html.dark .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}