:root {
    --app-bg: #f5f7fb;
    --app-card: #ffffff;
    --app-text: #1f2937;
    --app-muted: #6b7280;
    --app-primary: #2563eb;
    --app-primary-rgb: 37, 99, 235;
    --app-accent: #dbeafe;
    --app-soft: #dbeafe;
    --app-border: color-mix(in srgb, #6b7280 28%, transparent);
}

body {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
}

.app-card,
.card,
.auth-card,
.profile-form-card,
.profile-head,
.qb3-card,
.theme-pick-card,
.font-card,
.buy-card,
.ticket-chat-card,
.chat-shell-v19,
.chat-shell-v18 {
    background: var(--app-card) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

.text-muted,
small,
.form-text {
    color: var(--app-muted) !important;
}

.btn-primary,
.app-nav-btn-v21:hover,
.app-nav-btn-v19:hover {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary);
    --bs-btn-hover-border-color: var(--app-primary);
}

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

.form-control,
.form-select {
    background-color: var(--app-card);
    color: var(--app-text);
    border-color: var(--app-border);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 20%, transparent);
}