:root {
    --tg-font-ui: "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --tg-font-display: "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,
body {
    font-family: var(--tg-font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.auth-page,
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.brand-text,
.card-title,
.content-header h1 {
    font-family: var(--tg-font-display);
}

.main-header,
.main-sidebar,
.content-wrapper,
.main-footer,
.nav-sidebar .nav-link p,
.nav-sidebar .nav-header,
.navbar-nav,
.dropdown-menu,
.btn,
.form-control,
.form-select,
.small-box,
.info-box {
    font-family: var(--tg-font-ui);
}