/* ===== 1) Load fonts FIRST (only if you’re using Google Fonts) ===== */
/* If using Space Mono: */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=BBH+Sans+Bogle:wght@700&display=swap');

/* If you're truly using BBH Sans Bogle, replace Space Mono below with your loaded family name.
   If BBH isn't hosted/imported, it won't show—browser will fall back. */

/* ===== 2) Font tokens ===== */
:root{
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, system-ui, sans-serif;

  /* headline font: change first name to whatever you want to use */
  --font-head: "BBH Sans Bogle", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* size tokens so it “stands out-y” but stays readable */
  --fs-h1: 1.5rem;    /* ~24px */
  --lh-h1: 2.0rem;
  --fs-h2: 1.25rem;   /* ~20px */
  --lh-h2: 1.8rem;
  --fs-label: 0.875rem; /* tabs/labels */
}

/* ===== 3) Body stays Inter ===== */
html, body, .page-body-container{
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 4) Headlines that should use the display font ===== */
/* Page title (top left) */
.page-header .page-name,
h1.page-title{
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-h1) !important;
  letter-spacing: 0 !important;
  font-synthesis: none;
}

/* Section headers: “System Metrics”, “Past Incidents”, Calendar heading, etc. */
.metrics-container h3,
#calendar-container .calendar-heading,
.components-section > h3,
.history-container > h3,
h3.section-title{
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
  letter-spacing: 0 !important;
}

/* Component group names (when components are grouped/accordion style) */
.components-section .group-name,
.components-container .group-name,
.component-group .group-name,
.component-inner-container > h3{
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
}

/* Metric card titles (e.g., “Uptime”, “Mobaro Web Backend”) */
.metrics-container .metric .title,
.metrics-container h4,
.metric-title{
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-h2) !important;
}

/* Incident titles + update subheads (keeps body copy Inter) */
.incident-title,
.incident-name,
.incident-title a,
.incident-updates h4{
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 1.0625rem !important; /* ~17px for hierarchy */
  line-height: 1.6rem !important;
}

/* Day / Week / Month tabs (small but “buttony”) */
.metrics-container .segmented-control a,
.metrics-container .segmented-control button,
.tabs a, .tab{
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: var(--fs-label) !important;
  letter-spacing: .01em !important;
}

/* ===== 5) Optional: banner (“All Systems Operational”) sizing ===== */
.page-status, .page-status span, .page-status .status{
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 1.rem !important;   /* make it pop */
  line-height: 2rem !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}