/**
 * ═══════════════════════════════════════════════════════════════════════════
 * DARAJAERP TYPOGRAPHY LAYER
 * BlueBridge Group — Connect, Control, Grow
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Two families, each with one job:
 *
 *   DM Sans            (--d-font-display)  headings, navigation, buttons,
 *                                          metrics, labels and tabs
 *   Segoe UI / DM Sans (--d-font-sans)     paragraphs, forms, contact details
 *                                          and table data
 *
 * Why this is its own file rather than rules inside daraja-components.css:
 * twelve stylesheets load after that one — vendor.css, app.css, daraja-v2.css
 * and daraja-theme.css among them — and at equal specificity the last one wins.
 * Assigning fonts there meant either losing to vendor or scattering !important
 * through the component library. This sheet is loaded last instead, so plain
 * selectors are enough and the intent stays readable.
 *
 * Segoe UI is intentionally a native system face rather than a bundled webfont.
 * IBM Plex Mono is untouched: .d-mono and the money columns keep their tabular
 * figures, which is the whole reason a third family is loaded at all.
 */

/* ── Reading voice ────────────────────────────────────────────────────────────
   The default for running text. Set on body so anything not claimed below
   inherits it rather than falling through to the vendor stack. */
body {
    /* Tailwind's compiled base sheet pins Inter on body. This layer loads last
       and owns the application typography contract, so it must win there. */
    font-family: var(--d-font-sans) !important;
}

.d-page,
.d-workspace {
    font-family: var(--d-font-sans);
}

/* Body copy, help text and anything that is read in sentences. */
p,
.d-workspace-subtitle,
.d-empty-description,
.d-metric-note,
.d-card-subtitle,
.d-cell-secondary,
.d-party-copy span,
.d-record-card-meta dd,
.sup-section-copy,
.stx-step-copy,
.ct-section-heading p,
.d-filter-panel .help-block,
.help-block {
    font-family: var(--d-font-sans);
}

/* Form fields and table data: entered and returned values, read in quantity. */
input,
select,
textarea,
.form-control,
.d-input,
.select2-container--default .select2-selection__rendered,
.d-table tbody td,
.d-table tbody th {
    font-family: var(--d-font-sans);
}

/* ── Interface voice ──────────────────────────────────────────────────────────
   Headings. */
h1, h2, h3, h4, h5, h6,
.d-workspace-title,
.d-card-title,
.d-empty-title,
.d-modal-title,
.modal-title,
.pos-modal-title,
.ct-section-heading h3,
.sup-section-head h2,
.stx-step-head h2,
.d-workspace-title-copy h2 {
    font-family: var(--d-font-display);
}

/* Navigation and tabs. */
.d-sidebar-link,
.d-sidebar-sublink-label,
.d-sidebar-section-label,
.d-nav-item,
.d-view-tab,
.d-tab,
.ct-step-tab,
.nav-tabs > li > a,
.breadcrumb {
    font-family: var(--d-font-display);
}

/* Buttons and the controls that behave like them. */
.d-btn,
.d-chip,
.d-icon-action,
.d-dropdown-item,
.btn,
.pos-modal-btn,
.ct-segment,
.sup-pill,
.stock-integrity-button {
    font-family: var(--d-font-display);
}

/* Metrics and headline figures. Tabular numerals so columns of money line up
   and digits stop shifting as values update. */
.d-metric-value,
.d-metric-label,
.d-kpi-value,
.stx-amount,
.stx-subtotal span,
.sup-priority-value,
.sup-pulse-total,
.cus-coverage strong,
.ct-review-head strong {
    font-family: var(--d-font-display);
    font-variant-numeric: tabular-nums;
}

/* Labels, eyebrows, column headers and badges — short, structural, uppercase
   more often than not. */
label,
.d-label,
.d-eyebrow,
.d-filter-label,
.d-badge,
.d-table thead th,
.d-table thead td,
.sup-priority-label,
.sup-detail small,
.ct-review-block small,
.ct-choice-label,
.ct-rail-label,
.control-label {
    font-family: var(--d-font-display);
}

/* ── Fallback safety ──────────────────────────────────────────────────────────
   Both families ship only the weights requested in layouts/partials/css.blade.php
   (400–800 display, 400–700 reading). Anything asking for 900 would be
   synthesised by the browser into a smeared faux-bold, so it is clamped. */
.d-metric-value,
.d-workspace-title,
h1, h2, h3 {
    font-synthesis-weight: none;
}