:root {
    --font-sans: "Outfit", Arial, Helvetica, sans-serif;
    --font-title: 500;
    --font-subtitle: 400;
    --font-body: 300;
    --font-info: 200;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-sans) !important;
}

body {
    font-weight: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand,
.admin-brand,
.internal-brand,
.admin-topbar h1,
.internal-page-heading h1,
.admin-page-title,
.admin-card-title,
.admin-section-title,
.admin-dashboard-hero h2,
.admin-dashboard-section-header h3,
.admin-stat-value,
.listing-title,
.vehicle-title,
.store-title {
    font-weight: var(--font-title) !important;
}

p,
li,
td,
th,
label,
input,
select,
textarea,
.subtitle,
.description,
.admin-content,
.internal-content,
.page-shell,
.admin-table,
.admin-form,
.store-form,
.auth-form {
    font-weight: var(--font-body) !important;
}

.admin-kicker,
.admin-area-label,
.internal-area,
.admin-dashboard-eyebrow,
.admin-stat-label,
.admin-table th,
.admin-label,
.form-hint,
.hint,
small,
.badge,
.tag,
.pill,
.status,
.chip,
.meta,
.text-muted,
.admin-muted,
.store-muted {
    font-weight: var(--font-info) !important;
}

a,
button,
summary,
.btn,
.button,
.site-nav a,
.site-nav-cta,
.admin-nav-link,
.internal-nav a,
.admin-menu-button,
.admin-logout-button,
.admin-action,
.admin-button,
.store-button,
.auth-form button {
    font-weight: var(--font-subtitle) !important;
}

strong,
b {
    font-weight: var(--font-title) !important;
}

::placeholder {
    font-family: var(--font-sans);
    font-weight: var(--font-info);
}