/* ============================================================
   Mission2050 — Design Tokens (Blue Accent Variant)
   Mirrors tokens.css with the heritage accent swapped to #2479BA.
   ============================================================ */

:root {
  /* ---------- Surfaces ---------- */
  --color-navy:          #1E6299;
  --color-navy-deep:     #08233A;
  /* Two surfaces drive the alternating section rhythm:
     bg-warm = the page background (clear white);
     bg-white = the "popped" sections (very light blue) so adjacent
     sections read as distinct bands. (Original design used cream vs white;
     the blue variant uses white vs light-blue.) */
  --color-bg-warm:       #FFFFFF;
  --color-bg-white:      #F4F9FD;
  --color-divider:       #D6E2EE;

  /* ---------- Type ---------- */
  --color-text-primary:  #1E6299;
  --color-text-muted:    #5A6776;
  --color-text-inverse:  #F7F5F0;
  --color-text-inverse-muted: #9BA6B5;

  /* ---------- Heritage accent (blue variant) ---------- */
  --color-gold:          #1E6299;
  --color-gold-hover:    #164B76;

  /* ---------- Sector wayfinding (blue-family, no warm tones) ---------- */
  --color-sector-ai:             #1E6299;
  --color-sector-energy:         #175888;
  --color-sector-water:          #2376AB;
  --color-sector-security:       #142E47;
  --color-sector-transportation: #3D5C73;
  --color-sector-realestate:     #4A6A85;

  /* ---------- Typography ---------- */
  --font-serif:  "Newsreader", "Tiempos Headline", "Canela", "GT Sectra", "Lyon", Georgia, serif;
  --font-sans:   "Inter", "Söhne", "Suisse Int'l", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (desktop) */
  --fs-display:  72px;  --lh-display: 80px;
  --fs-h1:       56px;  --lh-h1:      64px;
  --fs-h2:       40px;  --lh-h2:      48px;
  --fs-h3:       28px;  --lh-h3:      36px;
  --fs-h4:       20px;  --lh-h4:      28px;
  --fs-body-lg:  18px;  --lh-body-lg: 30px;
  --fs-body:     16px;  --lh-body:    28px;
  --fs-meta:     13px;  --lh-meta:    20px;

  /* ---------- Layout ---------- */
  --content-max: 1280px;
  --gutter:      80px;
  --section-y:   120px;
  --section-y-mobile: 64px;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 44px; --lh-display: 52px;
    --fs-h1:      40px; --lh-h1:      46px;
    --fs-h2:      30px; --lh-h2:      36px;
    --fs-h3:      24px; --lh-h3:      30px;
    --gutter:     24px;
  }
}

/* ---------- Base resets ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  background: var(--color-bg-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* tabular figures everywhere we say "stat" */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* meta / eyebrow text */
.meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }