/* BlueMX design tokens: one source of truth for every page.
 *
 * Replaces the previous palette (teal-green, brass/ochre, cream, serif
 * headings over monospace kickers). That combination reads as generic
 * AI-generated design; a partner should see a corporate system, not a
 * template. Built from the BMX program-dashboard mockup and the CGP style
 * guide:
 *
 *   Headings (H1, H2)   Georgia          Teal   #0493C2 / primary #1375BC
 *   Subheadings (H3+)   Aptos            Navy   #1B3A5C
 *   Body                Aptos            Black-navy ink
 *   Accents                              Gold   #B8962E (used sparingly)
 *   Background                           White  #FFFFFF
 *   Callouts                             Light teal #E6F4FA
 *
 * Rules that keep it from drifting back:
 *   - White background everywhere. No cream, no dark canvas.
 *   - No monospace for headings, kickers or labels. Monospace is for data only.
 *   - Blue carries the brand; red-orange means "needs attention"; gold is a
 *     rare accent, never a third theme colour.
 */
:root {
  /* Brand */
  --primary: #1375BC;        /* BlueMX blue */
  --primary-dark: #0F5E97;
  --primary-soft: #E8F2F9;
  /* The style guide's teal is #0493C2. On white that measures 3.52:1, which
     clears WCAG AA only for text at 24px or larger, and most headings here
     render at 19-21px. --teal is the same hue taken down 13% in lightness to
     reach 4.5:1, and is what all heading text uses. --teal-bright is the exact
     brand value, kept for rules, fills and other non-text marks where contrast
     ratios do not apply. */
  --teal: #0378A0;           /* heading text */
  --teal-bright: #0493C2;    /* brand teal, non-text only */
  --gold: #B8962E;           /* rare accent, non-text */
  --gold-deep: #836A21;      /* the same accent as legible text */

  /* Ink */
  --ink: #0D2847;
  --navy: #1B3A5C;
  --ink-soft: #5A7189;
  --ink-faint: #93A4B6;

  /* Surfaces */
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #F3F8FC;
  --callout: #E8F2F9;
  --line: #DCE7F1;
  --line-strong: #C3D4E4;

  /* Status */
  --ok: #1375BC;
  --ok-soft: #E8F2F9;
  --attention: #C24A3A;
  --attention-soft: #F6E3DF;
  --progress: #0D2847;

  /* Type */
  --font: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* data only */

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(13, 40, 71, 0.05), 0 8px 24px rgba(13, 40, 71, 0.06);

  /* Back-compat aliases so existing rules keep resolving while pages migrate.
     New code should use the names above. */
  --text: var(--ink);
  --text-dim: var(--ink-soft);
  --border: var(--line);
  --accent: var(--primary);
  --accent-strong: var(--primary-dark);
  --accent-dim: var(--primary-soft);
  --brass: var(--gold);
  --warn: var(--attention);
  --warn-dim: var(--attention-soft);
  --paper: var(--bg);
  --ink-deep: var(--ink);
  --cream: #FFFFFF;
  /* Legacy alias. It was a body-text colour on the dark canvas; on white,
     --ink-faint is too light to read, so it resolves to --ink-soft. Use
     --ink-faint directly for placeholders and disabled marks only. */
  --muted: var(--ink-soft);
  --line-soft: var(--line);
  --teal-tint: var(--primary-soft);
  --brass-tint: #F5EFDC;
  --rust: var(--attention);
  --rust-tint: var(--attention-soft);
  --sans: var(--font);
}

/* Shared primitives every page can rely on. */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--teal); letter-spacing: -0.01em; }
h3, h4, h5 { font-family: var(--font); font-weight: 600; color: var(--navy); }

/* Section label above a heading. Sentence-case, navy, no monospace, no
   letterspaced all-caps. That treatment is the tell we're removing. */
.eyebrow, .kicker, .side-group, .home-kicker, .home-section-label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
}

/* Numbers are data: tabular, navy, never decorative serif. */
.num, .kpi .v, .stat b { font-variant-numeric: tabular-nums; }

/* ---------- Shared chrome: white topbar with the BlueMX mark ----------
   Mirrors the BMX program dashboard. Pages opt in by using .topbar with
   a .brand block; the old dark-bar rules are gone. */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(19, 117, 188, 0.06);
  color: var(--ink);
  padding: 0 22px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
  text-decoration: none;
}
.topbar .brand .mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.topbar .brand .mx { color: var(--primary); }
.topbar .brand small {
  display: block;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 2px;
}
.topbar a { color: var(--ink-soft); font-size: 12.5px; text-decoration: none; }
.topbar a:hover { color: var(--primary); }
.topbar .brand:hover { color: var(--ink); }