html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html,
body {
    font-family: var(--re-font-ui);
    background:
        radial-gradient(circle at top left, rgba(247, 121, 76, 0.08), transparent 28%),
        radial-gradient(circle at bottom right, rgba(46, 69, 153, 0.06), transparent 32%),
        var(--pi-bg);
    color: var(--pi-text);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(247, 121, 76, 0.1), transparent 30%),
        radial-gradient(circle at bottom right, rgba(122, 144, 238, 0.1), transparent 35%),
        var(--pi-bg);
}

body.app-shell-public,
body.app-shell-minimal,
body.app-shell-dashboard,
.bgc-white,
.bgc-f7 {
    background-color: var(--pi-bg) !important;
}

body,
p,
li,
small,
label,
.table,
.table td,
.table th,
.dropdown-item,
.breadcrumb-item,
.hero-text,
.paragraph {
    color: var(--pi-text);
    font-family: var(--re-font-ui);
}

h1,
h2,
.title,
.hero-title,
.cta-title,
.app-page-title,
.app-hero-title,
.app-home-template__hero-showcase h2,
.dashboard_title_area h1,
.dashboard_title_area h2,
.app-dashboard-sidebar__title,
.app-card-title {
    font-family: var(--re-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pi-text-strong);
}

h3,
h4,
h5,
h6,
.app-card-title-sm,
.app-user-menu__name,
.app-dashboard-sidebar__section-title {
    font-family: var(--re-font-ui);
    font-weight: 700;
    color: var(--pi-text-strong);
}

a {
    color: var(--re-brand-primary-600);
    transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
    color: var(--re-brand-accent-500);
}

::placeholder {
    color: var(--re-text-muted) !important;
    opacity: 1;
}

.form-control,
.form-select,
.page-link,
.dropdown-menu,
.modal-content,
.toast,
.offcanvas,
.popover,
.card,
.table,
.accordion-item,
.nav-tabs .nav-link,
.ud-btn,
.btn,
.app-shell-card,
.app-section-card,
.app-status-card,
.app-home-template__capability-card,
.app-home-template__value-card,
.app-user-menu__menu.dropdown-menu,
.app-toast {
    border-color: var(--pi-border);
}

.form-control,
.form-select,
textarea,
input,
select {
    min-height: 2.9rem;
    border-radius: var(--re-radius-input);
    background-color: var(--re-input-bg);
    color: var(--pi-text);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    border-color: var(--re-brand-primary-300);
    box-shadow: 0 0 0 0.22rem var(--re-input-focus-ring);
}

.dropdown-menu,
.modal-content,
.toast,
.offcanvas,
.popover,
.app-section-card,
.app-shell-card,
.app-status-card,
.app-home-template__capability-card,
.app-home-template__value-card,
.app-user-menu__menu.dropdown-menu {
    border-radius: var(--re-radius-panel);
    background-color: var(--pi-surface-elevated);
    box-shadow: var(--pi-shadow);
}

.ud-btn,
.btn,
.btn-thm,
.btn-dark,
.btn-white,
.page-link {
    border-radius: var(--re-radius-button);
    font-family: var(--re-font-ui);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ud-btn.btn-thm,
.btn-thm,
.app-public-header__cta.ud-btn {
    background-color: var(--re-cta-bg) !important;
    border-color: var(--re-cta-bg) !important;
    color: var(--re-cta-text) !important;
}

.ud-btn.btn-thm:hover,
.ud-btn.btn-thm:focus-visible,
.btn-thm:hover,
.btn-thm:focus-visible,
.app-public-header__cta.ud-btn:hover,
.app-public-header__cta.ud-btn:focus-visible {
    background-color: var(--re-cta-bg-hover) !important;
    border-color: var(--re-cta-bg-hover) !important;
    color: var(--re-cta-text) !important;
}

.ud-btn.btn-white,
.btn-white {
    background-color: var(--re-card-bg) !important;
    color: var(--re-brand-primary-700) !important;
    border: 1px solid var(--pi-border) !important;
}

.ud-btn.btn-white:hover,
.ud-btn.btn-white:focus-visible,
.btn-white:hover,
.btn-white:focus-visible {
    background-color: var(--re-surface-soft) !important;
    color: var(--re-brand-accent-600) !important;
    border-color: var(--re-brand-accent-300) !important;
}

.ud-btn.btn-dark,
.btn-dark {
    background-color: var(--re-brand-primary-700) !important;
    border-color: var(--re-brand-primary-700) !important;
    color: #ffffff !important;
}

.ud-btn.btn-dark:hover,
.ud-btn.btn-dark:focus-visible,
.btn-dark:hover,
.btn-dark:focus-visible {
    background-color: var(--re-brand-primary-800) !important;
    border-color: var(--re-brand-primary-800) !important;
}

.table {
    color: var(--pi-text);
    background: transparent;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--pi-border);
}

.table thead th {
    color: var(--re-brand-primary-700);
    font-weight: 600;
}

.badge,
.app-user-menu__badge {
    font-family: var(--re-font-ui);
    font-weight: 600;
    border-radius: var(--re-radius-pill);
}

.alert {
    border-radius: var(--re-radius-panel);
}

.alert-success {
    background-color: var(--re-success-bg);
    color: var(--re-success-text);
}

.alert-warning {
    background-color: var(--re-warning-bg);
    color: var(--re-warning-text);
}

.alert-danger {
    background-color: var(--re-danger-bg);
    color: var(--re-danger-text);
}

.app-breadcrumb .breadcrumb-item,
.app-breadcrumb .breadcrumb-item a {
    color: var(--re-text-secondary);
}

.app-breadcrumb .breadcrumb-item.active,
.app-breadcrumb .breadcrumb-item.active span {
    color: var(--re-brand-primary-700);
}