@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);*/
/*}*/

/*!* 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;*/
/*}*/

.card-gradient {
    background:
        radial-gradient(
            ellipse at center,
            var(--tblr-card-bg) 0%,
            color-mix(in srgb, var(--tblr-card-bg) 0%, transparent) 80%
        ),
        linear-gradient(
            var(--tblr-card-gradient-direction),
            color-mix(
                in srgb,
                var(--tblr-card-bg) var(--tblr-card-gradient-opacity),
                transparent
            ) 0%,
            var(--tblr-card-bg) 40%
        ),
        linear-gradient(
            calc(270deg + var(--tblr-card-gradient-direction)),
            var(--tblr-card-gradient)
        );
}