@import url('https://rsms.me/inter/inter.css');

body {
    /* Use CSS custom properties that automatically change with theme */
    background: var(--tblr-body-bg, #ffffff);
    color: var(--tblr-body-color, #1f2937);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Additional theme-aware styles for better consistency */
:root {
    /* Light theme defaults (already defined by Tabler) */
    --app-bg-color: var(--tblr-body-bg);
    --app-text-color: var(--tblr-body-color);
    --app-surface-color: var(--tblr-bg-surface);
    --app-border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] {
    /* Dark theme overrides (Tabler handles most of this automatically) */
    --app-bg-color: var(--tblr-body-bg);
    --app-text-color: var(--tblr-body-color);
    --app-surface-color: var(--tblr-bg-surface);
    --app-border-color: var(--tblr-border-color);
    .logo-dark-mode {
        filter: brightness(0) invert(1);
    }
}

/* Ensure smooth transitions for theme changes */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Apply theme-aware backgrounds to common elements */
.page {
    background: var(--tblr-body-bg);
    transition: background-color 0.2s ease;
}

.page-wrapper {
    background: var(--tblr-body-bg);
    transition: background-color 0.2s ease;
}

/* Ensure cards and surfaces adapt to theme */
.card {
    background: var(--tblr-bg-surface, var(--tblr-body-bg));
    border-color: var(--tblr-border-color);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Optional: Custom theme-aware utility classes */
.bg-theme {
    background-color: var(--tblr-body-bg) !important;
}

.text-theme {
    color: var(--tblr-body-color) !important;
}

.border-theme {
    border-color: var(--tblr-border-color) !important;
}

.bg-primary-lti {
    background: url("../img/background-1-pFp9h_4.svg") center/cover no-repeat, rgb(186,217,237);
}

[data-bs-theme="dark"] .bg-primary-lti {
    background: url("../img/background-1-pFp9h_4.svg") center/cover no-repeat, rgb(30, 41, 59);
    /* Adjust the fallback color to match your dark theme */
}