:root {
    --bs-primary: var(--tf-color-primary);
    --bs-secondary: var(--tf-color-secondary);
    --bs-success: var(--tf-color-success);
    --bs-warning: var(--tf-color-warning);
    --bs-danger: var(--tf-color-danger);
    --bs-info: var(--tf-color-info);
    --bs-light: var(--tf-bg-muted);
    --bs-dark: var(--tf-color-gray-900);
    /* --bs-body-bg: var(--tf-bg-body);
    --bs-body-color: var(--tf-text-main);
    --bs-body-font-family: var(--tf-font-family-base);
    --bs-border-color: var(--tf-border-color); */
    --bs-body-bg: var(--tf-bg-body);
    --bs-body-color: var(--tf-text-main);
    --bs-secondary-color: var(--tf-text-muted);
    --bs-secondary-bg: var(--tf-bg-muted);
    --bs-tertiary-bg: var(--tf-bg-muted);
    --bs-body-font-family: var(--tf-font-family-base);
    --bs-border-color: var(--tf-border-color);
    --bs-border-radius: var(--tf-radius-md);
    --bs-link-color: var(--tf-color-primary);
    --bs-link-hover-color: var(--tf-color-primary-hover);
    --bs-focus-ring-color: var(--tf-focus-ring-color);
}

/* body {
    background: var(--tf-bg-body);
    color: var(--tf-text-main);
} */
body {
    background: var(--tf-bg-body);
    color: var(--tf-text-main);
}

.bg-body {
    background-color: var(--tf-bg-body) !important;
}

.bg-body-secondary,
.bg-body-tertiary,
.bg-light {
    background-color: var(--tf-bg-muted) !important;
}

.text-secondary,
.text-muted {
    color: var(--tf-text-muted) !important;
}

.btn-primary {
    --bs-btn-bg: var(--tf-color-primary);
    --bs-btn-border-color: var(--tf-color-primary);
    --bs-btn-hover-bg: var(--tf-color-primary-hover);
    --bs-btn-hover-border-color: var(--tf-color-primary-hover);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}

.btn-secondary {
    --bs-btn-bg: var(--tf-color-secondary);
    --bs-btn-border-color: var(--tf-color-secondary);
    --bs-btn-hover-bg: var(--tf-color-secondary-hover);
    --bs-btn-hover-border-color: var(--tf-color-secondary-hover);
}

.card {
    background: var(--tf-card-bg);
    border: var(--tf-card-border);
    border-radius: var(--tf-card-radius);
    box-shadow: var(--tf-card-shadow);
    color: var(--tf-text-main);
}

.form-control,
.form-select {
    background-color: var(--tf-input-bg);
    border: var(--tf-input-border);
    border-radius: var(--tf-input-radius);
    color: var(--tf-input-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--tf-color-primary-hover);
    box-shadow: var(--tf-focus-ring);
}

.table {
    --bs-table-color: var(--tf-text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tf-border-color);
    --bs-table-hover-bg: var(--tf-table-row-hover-bg);
}

.modal .tf-card,
.offcanvas .tf-card,
.dropdown-menu .tf-card {
    box-shadow: none;
}

.modal-content,
.offcanvas,
.toast {
    background: var(--tf-bg-surface);
    border: var(--tf-border-default);
    border-radius: var(--tf-radius-lg);
    color: var(--tf-text-main);
    font-family: var(--tf-font-family-base);
}

.modal-header,
.modal-footer,
.offcanvas-header {
    border-color: var(--tf-border-color);
}

.dropdown-menu {
    background: var(--tf-bg-surface);
    border: var(--tf-border-default);
    border-radius: var(--tf-radius-md);
    box-shadow: var(--tf-shadow-md);
    color: var(--tf-text-main);
    font-family: var(--tf-font-family-base);
}

.dropdown-item {
    color: var(--tf-text-main);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--tf-color-primary-soft);
    color: var(--tf-color-primary);
}