/**
 * Runtime theme bridge — maps admin tokens onto chrome, buttons, forms.
 * Loaded after design-system.css; :root overrides come from #ts-theme-vars.
 */

html, body {
    font-family: var(--ts-font-body);
    color: var(--color-text);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title h2 {
    font-family: var(--ts-font-heading);
    color: var(--color-heading);
}

a {
    color: var(--color-primary-text);
}

.main-header {
    background: var(--color-header-bg);
    color: var(--color-header-text);
}

.header-top {
    background: var(--color-header-top-bg);
    color: var(--color-header-top-text);
}

.header-main,
.ts-mheader {
    background: var(--color-header-bg);
    color: var(--color-header-text);
}

.main-footer,
footer.main-footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
}

.main-footer a,
footer.main-footer a {
    color: inherit;
}

.btn-primary,
.btn.ts-theme-btn,
a.ts-theme-btn,
.ts-theme-btn {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-button, 12px);
}

.btn-primary:hover,
.btn.ts-theme-btn:hover,
a.ts-theme-btn:hover,
.ts-theme-btn:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-on-primary) !important;
}

.ts-theme-btn--alt {
    background: var(--color-primary-hover) !important;
    color: var(--color-on-primary) !important;
    border-color: var(--color-primary-hover) !important;
    border-radius: var(--radius-button, 12px);
}

.ts-theme-btn--sec,
.btn-outline-primary {
    background: var(--color-button-secondary-bg) !important;
    color: var(--color-button-secondary-text) !important;
    border: 1px solid var(--color-button-secondary-border) !important;
    border-radius: var(--radius-button, 12px);
}

.ts-theme-link {
    color: var(--color-primary-text) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea,
.form-control {
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
    border-color: var(--color-input-border);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}

.card,
.kpu-card,
.offer-card,
.service-card-photo {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-md, 15px);
}

.mobile-bottom-nav.ts-bottom-nav,
.mobile-bottom-nav {
    background: var(--color-surface);
    border-top-color: var(--color-border);
}

.bottom-nav-item a:hover,
.bottom-nav-item a.active,
.bottom-nav-item .ts-bottom-menu-btn:hover,
.bottom-nav-item .ts-bottom-menu-btn[aria-expanded="true"],
.bottom-nav-item .ts-bottom-search-btn:hover,
.bottom-nav-item .ts-bottom-search-btn.active,
.bottom-nav-item .ts-bottom-search-btn[aria-expanded="true"] {
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.12);
}

.ts-bottom-cart__fab {
    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-hover)) !important;
    color: var(--color-on-primary) !important;
    box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.22);
}

.ts-bottom-cart__fab i {
    color: var(--color-on-primary) !important;
}