/**
 * UX2 typography (ticket 5) — IBM Plex Sans for everything, IBM Plex Mono for codes and IDs.
 *
 * Fonts come from Google Fonts for the trial (linked by engine/ux2.php); they move to our CDN once the team is
 * happy with them. Noto Sans Tamil is the fallback for Tamil text (Plex has no Tamil); Google serves it only
 * to pages that actually contain Tamil characters.
 * Replaces every place Metronic names Poppins: the Bootstrap font variables, html/body, date range picker,
 * Quill toolbar, ApexCharts labels, Leaflet popups, DataTables' Responsive "+".
 * To try a different text font, change --ux2-font only (e.g. 'InterVariable' for option 8 of the type demo).
 */

:root {
    --ux2-font: 'IBM Plex Sans', 'Noto Sans Tamil', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ux2-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --bs-font-sans-serif: var(--ux2-font);
    --bs-font-monospace: var(--ux2-font-mono);
    --bs-body-font-family: var(--ux2-font);
    --notes-font-family: var(--ux2-font); /* SkoAI Notes (assets/skoai-notes.css set Plus Jakarta Sans) */
}

html,
body {
    font-family: var(--ux2-font);
}

/* Components that name Poppins themselves */
.daterangepicker,
.ql-toolbar,
.leaflet-container .leaflet-popup-content-wrapper .leaflet-popup-content,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    font-family: var(--ux2-font);
}

.apexcharts-legend-text,
.apexcharts-text,
.apexcharts-title-text {
    font-family: var(--ux2-font) !important;
}

/* Codes and IDs: monospaced, so they read as exact identifiers (CND-1043, INT-AI, ps-7f3a9c2e).
   Add .ux2-mono to any element that shows one. */
code,
kbd,
pre,
samp,
.ux2-mono {
    font-family: var(--ux2-font-mono);
}

.ux2-mono {
    font-size: 0.92em;
    letter-spacing: 0;
}

/* Tabular numbers in data: columns of scores, counts, dates and times line up */
.table,
table.dataTable,
.badge,
.ux2-when-date,
.ux2-when-time,
input[type="number"] {
    font-variant-numeric: tabular-nums;
}