/* ════════════════════════════════════════════════════════════ Adiox Typography System ───────────────────────────────────────────────────────────── Headings ............ Manrope Body text ........... Inter Numbers & data ...... IBM Plex Mono Linked by _Layout, _AdminLayout and _AuthLayout after the theme stylesheets. The font files are loaded via Google Fonts in each layout's . ════════════════════════════════════════════════════════════ */ :root { --font-heading: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; /* Keep Bootstrap components on the same system */ --bs-body-font-family: var(--font-body); --bs-font-sans-serif: var(--font-body); --bs-font-monospace: var(--font-mono); } /* ── Body text · Inter ─────────────────────────────────────── */ body { font-family: var(--font-body); } /* Form controls & buttons don't inherit the body font by default */ button, input, optgroup, select, textarea { font-family: var(--font-body); } .btn, .form-control, .form-select, .form-check-label, .dropdown-menu, .nav-link, .badge, .modal, .toast, .tooltip, .popover, table, .dataTables_wrapper { font-family: var(--font-body); } /* ── Headings · Manrope ────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, legend, table thead th, .modal-title, .card-title, .navbar-brand, .auth-brand-name, .asb-brand-name, [class*="-title"], [class*="-heading"] { font-family: var(--font-heading); } /* ── Data values · IBM Plex Mono ─────────────────────────────── Numbers, balances, prices, account IDs, stats and countdowns. Targets the value/amount/count class conventions used across dashboards, cards, tables, forms and modals. :where() keeps specificity at zero so any explicit rule can still override. */ code, kbd, pre, samp { font-family: var(--font-mono); } :where( :is( [class*="-val"], [class*="-amount"], [class*="-price"], [class*="-balance"], [class*="-count"], [class*="-num"], [class*="-score"], [class*="-pts"], [class*="-coins"] ):not( [class*="validation"], [class*="country"], [class*="-empty"], [class*="title"] ) ) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Utilities ─────────────────────────────────────────────── */ .font-heading { font-family: var(--font-heading) !important; } .font-body { font-family: var(--font-body) !important; } .font-mono { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; }