/* Hub typography — edit tokens here only. Pages consume var(--type-*) / var(--fw-*) / var(--lh-*) / var(--ls-*). */

:root {
    --font-sans: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --fs-caption: 0.75rem;
    --fs-muted: 0.875rem;
    --fs-label: 0.875rem;
    --fs-table: 0.875rem;
    --fs-nav: var(--fs-body);
    --fs-button: 0.9375rem;
    --fs-body: 1rem;
    --fs-section: 1.125rem;
    --fs-stat: 1.375rem;
    --fs-page: 1.5rem;

    --lh-none: 1;
    --lh-tight: 1.25;
    --lh-snug: 1.35;
    --lh-body: 1.45;
    --lh-loose: 1.6;

    --ls-none: 0;
    --ls-tight: -0.01em;
    --ls-wide: 0.02em;

    --type-caption: var(--fs-caption);
    --type-page: var(--fs-page);
    --type-section: var(--fs-section);
    --type-body: var(--fs-body);
    --type-label: var(--fs-label);
    --type-button: var(--fs-button);
    --type-muted: var(--fs-muted);
    --type-table: var(--fs-table);
}

html {
    font-family: var(--font-sans);
}

body,
body.app-shell {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-none);
}

button,
input,
select,
textarea,
table,
th,
td,
a,
p,
span,
li,
label,
small {
    font-family: inherit;
}

h1,
.page-title,
.header-section h1,
.order-detail-header .page-title,
.order-detail-title-top .page-title,
.form-title {
    font-family: var(--font-sans);
    font-size: var(--type-page) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

h2,
.shipping-panel > h2 {
    font-family: var(--font-sans);
    font-size: var(--type-section) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-none);
}

h3,
h4,
.section-header h3,
.section-header h2,
.header-title,
.sh-map-site h4,
.bulk-ops-section-title {
    font-family: var(--font-sans);
    font-size: var(--type-section) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-none);
}

h4.bulk-ops-section-title {
    font-size: var(--type-section) !important;
}

.subtitle,
.form-subtitle {
    font-size: var(--type-muted) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-body);
}

label,
.form-group label,
.input-group label,
.shipping-form label {
    font-size: var(--type-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
}

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-submit,
.quick-action-btn,
.header-actions .btn-primary,
.header-actions .btn-secondary,
.header-actions .btn-danger,
body.density-compact .btn-primary,
body.density-compact .btn-secondary,
body.density-compact .btn-danger,
body.density-compact .btn-submit,
.shipping-tab,
.settings-tab-list button,
.settings-tab-btn,
.settings-tab {
    font-family: var(--font-sans);
    font-size: var(--type-button) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-none);
}

.nav-menu a,
.nav-group-toggle,
.nav-submenu a,
.sidebar .nav-menu a,
.sidebar .nav-group-toggle,
.sidebar .nav-submenu a,
body.density-compact .nav-menu a,
body.density-compact .nav-group-toggle,
body.density-compact .nav-submenu a {
    font-size: var(--fs-nav) !important;
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-none);
}

.app-shell th,
.app-shell .modern-table th,
.app-shell .product-table th,
.app-shell table.modern-table th,
.app-shell .order-table-header,
.app-shell .order-table-header > div,
.app-shell .combination-table th,
.app-shell .ops-table th,
.app-shell .report-pdf-section table th {
    font-family: var(--font-sans) !important;
    font-size: var(--type-table) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-tight) !important;
    letter-spacing: var(--ls-none) !important;
}

.app-shell td,
.app-shell .modern-table td,
.app-shell .product-table td,
.app-shell table.modern-table td,
.app-shell .combination-table td,
.app-shell .ops-table td,
.app-shell .report-pdf-section table td {
    font-family: var(--font-sans);
    font-size: var(--type-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
}

.stat-info .label {
    font-size: var(--type-label) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-tight);
}

.stat-info .value {
    font-size: var(--fs-stat) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-tight);
}

.order-ref {
    font-size: var(--type-body) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-tight);
}

.order-site,
.order-pay,
small,
.help-text,
.muted {
    font-size: var(--type-muted) !important;
    font-weight: var(--fw-regular) !important;
    line-height: var(--lh-body);
}

input,
select,
textarea,
button {
    font-family: var(--font-sans);
}

.price-mono,
code,
kbd,
pre,
.font-mono {
    font-family: var(--font-mono);
}

.order-pdf-template h1,
.order-pdf-template h2,
.order-pdf-template h3,
.order-pdf-template th,
.order-pdf-template td,
.report-pdf-template h1,
.report-pdf-template h2,
.report-pdf-template h3,
.report-pdf-template th,
.report-pdf-template td {
    font-size: revert !important;
    font-weight: revert !important;
    line-height: revert !important;
    letter-spacing: revert !important;
}
