@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@200;300;400;500;600;700&family=Prompt:wght@300;400;500;600&display=swap');

/**
 * AQM unified typography
 *
 * Matches dashboard.php across public, admin, legacy, and device pages.
 * IBM Plex Sans Thai is the rendered dashboard face for both interface text
 * and measurements; Prompt remains the Thai-safe fallback.
 */
:root {
  --aqm-font-primary: 'IBM Plex Sans Thai', 'Prompt', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aqm-font-data: 'IBM Plex Sans Thai', 'Prompt', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aqm-font-display-weight: 200;
  --aqm-font-display-accent-weight: 500;

  /* Shared/public tokens */
  --aqm-font: var(--aqm-font-primary);
  --aqm-mono: var(--aqm-font-data);
  --f-serif: var(--aqm-font-primary);
  --f-sans: var(--aqm-font-primary);
  --f-mono: var(--aqm-font-data);
  --fs: var(--aqm-font-primary);
  --fh: var(--aqm-font-primary);
  --fm: var(--aqm-font-data);
  --fH: var(--aqm-font-primary);
  --fU: var(--aqm-font-primary);
  --fE: var(--aqm-font-primary);
  --fM: var(--aqm-font-data);

  /* Admin/legacy tokens */
  --f-ui: var(--aqm-font-primary);
  --f-th: var(--aqm-font-primary);
  --font: var(--aqm-font-primary);
  --font-sans: var(--aqm-font-primary);
  --font-heading: var(--aqm-font-primary);
  --font-body: var(--aqm-font-primary);
  --font-mono: var(--aqm-font-data);
}

html,
html body:not(#aqm-font-specificity-guard),
html body button:not(#aqm-font-specificity-guard),
html body input:not(#aqm-font-specificity-guard),
html body select:not(#aqm-font-specificity-guard),
html body textarea:not(#aqm-font-specificity-guard),
html body optgroup:not(#aqm-font-specificity-guard) {
  font-family: var(--aqm-font-primary) !important;
}

html body :where(
  address, article, aside, blockquote, caption, dd, details, dialog, div, dt,
  figcaption, figure, footer, form, header, hgroup, h1, h2, h3, h4, h5, h6,
  label, legend, li, main, nav, option, p, section, small, span, strong,
  summary, table, tbody, td, tfoot, th, thead, tr, a
):not(#aqm-font-specificity-guard) {
  font-family: inherit !important;
}

html body *:not(#aqm-font-specificity-guard)::before,
html body *:not(#aqm-font-specificity-guard)::after {
  font-family: inherit !important;
}

html body :where(
  code, pre, kbd, samp, time,
  .mono, .font-mono, .data-value, .metric-value, .stat-value, .kpi-value,
  .number-value, .sensor-value, [data-font='mono'], [data-font='data']
):not(#aqm-font-specificity-guard) {
  font-family: var(--aqm-font-data) !important;
}

/* Match the light display typography used by dashboard.php. */
html body :where(.hero, .public-hero, .dash-command-header) h1:not(#aqm-font-specificity-guard) {
  font-family: var(--aqm-font-primary) !important;
  font-weight: var(--aqm-font-display-weight) !important;
}

html body :where(.hero, .public-hero, .dash-command-header) h1 :where(b, strong, em):not(#aqm-font-specificity-guard) {
  font-family: inherit !important;
  font-weight: var(--aqm-font-display-accent-weight) !important;
}

svg text {
  font-family: var(--aqm-font-primary) !important;
}

/* Preserve glyph fonts used for icons. */
html body :where(.fa, .fa-classic, .fa-solid, .fa-regular, .fas, .far):not(#aqm-font-specificity-guard) {
  font-family: 'Font Awesome 6 Free' !important;
}

html body :where(.fa-brands, .fab):not(#aqm-font-specificity-guard) {
  font-family: 'Font Awesome 6 Brands' !important;
}

html body .material-icons:not(#aqm-font-specificity-guard) {
  font-family: 'Material Icons' !important;
}

html body :where(.material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp):not(#aqm-font-specificity-guard) {
  font-family: 'Material Symbols Outlined' !important;
}

@media print {
  html,
  body,
  body * {
    font-family: var(--aqm-font-primary) !important;
  }

  body :where(code, pre, kbd, samp, time, .mono, .font-mono, [data-font='mono'], [data-font='data']) {
    font-family: var(--aqm-font-data) !important;
  }
}