/**
 * Maui Strong Fund — Three-Year Impact Report design tokens
 * Site: hcf-maui-strong.mystagingwebsite.com → strongerhawaii.org (single page)
 * Source of truth: Figma cJjAxJTvGumMp1ilvBP4on frame 228:331 [F] + PDF-of-record
 * pixel samples [S]. See Maui-Strong_Build-Plan.md §1 for the tagged token table.
 *
 * Convention (bricks-build-checklist §7): type-scale utilities carry !important
 * and are CAPS-authoritative. An intentional per-design deviation OMITS the
 * class and styles the element — never fights the class.
 * Hover/active states are DESIGNED AT BUILD (desktop-only comps) — flag any
 * client feedback against them as a decision, not a bug.
 */

:root {
  /* ---- color [F] unless noted ---- */
  --ms-green: #149C7C;            /* green H2s, big stat numbers, badges */
  --ms-green-deep: #008163;       /* exact figures, carousel arrows, tile numbers */
  --ms-green-eyebrow: #1A6B5A;    /* uppercase eyebrows */
  --ms-navy: #253C58;             /* navy H2/H3 (shared with SH v2) */
  --ms-ink: #1E1E1E;              /* body text */
  --ms-green-gray: #25433C;       /* stat labels */
  --ms-teal-band: #047871;        /* [S] impact-intro band bg */
  --ms-teal-band-2: #006F6E;      /* [S] band gradient partner */
  --ms-gold: #F0CE72;             /* [S] eyebrow on teal band */
  --ms-quote-green: #065844;      /* [S] quote section bg */
  --ms-footer-teal: #003743;      /* [S] footer bg */
  --ms-btn-teal: #006177;         /* [S] GIVE / Support the Work buttons */
  --ms-btn-cream: #FCFFE3;        /* Our Story / View all Partners buttons */
  --ms-cream: #FFFDF1;            /* [S] numbers band (tapa cream) */
  --ms-mint: #D8F4EF;             /* accent gradient blocks */
  --ms-tint: #F8FEFC;             /* section bg tint */
  --ms-tint-2: #F9FFFC;           /* section bg tint variant */
  --ms-tint-blue: #F1FDFF;        /* [S] looking-ahead pale blue */
  --ms-pill-blue: #D9ECEF;        /* [S] video-card tag pill */
  --ms-pill-green: #D9EFE6;       /* [S] video-card tag pill */
  --ms-caption-bg: rgba(0, 0, 0, 0.7);

  /* ---- type ---- */
  --ms-font-head: 'Barlow', -apple-system, sans-serif;
  --ms-font-body: 'Albert Sans', -apple-system, sans-serif;
  --ms-font-alt: 'DM Sans', -apple-system, sans-serif; /* hero subhead only — open item #9 */

  /* ---- surface ---- */
  --ms-radius: 5px;
  --ms-shadow-card: 0 0 0.5px rgba(48, 49, 51, 0.05), 0 8px 8px rgba(48, 49, 51, 0.1);

  /* ---- layout (comp 1440: content 1300, 70px gutters) ---- */
  --ms-content-max: 1300px;
  --ms-gutter: 60px;
}

/* ============ type scale (CAPS-authoritative) ============ */

.ms-h1 {
  font-family: var(--ms-font-head) !important;
  font-weight: 700 !important;
  font-size: 65px !important;
  line-height: 1.15 !important;
  color: #fff !important;
}
.ms-h2-navy {
  font-family: var(--ms-font-head) !important;
  font-weight: 700 !important;
  font-size: 40px !important;
  line-height: 1.3 !important;
  color: var(--ms-navy) !important;
}
.ms-h2-green {
  font-family: var(--ms-font-head) !important;
  font-weight: 600 !important;
  font-size: 40px !important;
  line-height: 60px !important;
  color: var(--ms-green) !important;
}
.ms-eyebrow {
  font-family: var(--ms-font-head) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: var(--ms-green-eyebrow) !important;
}
.ms-eyebrow--gold { color: var(--ms-gold) !important; }
.ms-lede { /* focus-area green lede — size [S], verify at fidelity pass */
  font-family: var(--ms-font-head) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 34px !important;
  color: var(--ms-green) !important;
}
.ms-body {
  font-family: var(--ms-font-body) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: var(--ms-ink) !important;
}
.ms-body-lg {
  font-family: var(--ms-font-body) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 31px !important;
  color: var(--ms-ink) !important;
}
.ms-stat-num {
  font-family: var(--ms-font-body) !important;
  font-weight: 700 !important;
  font-size: 70px !important;
  line-height: 1 !important;
  color: var(--ms-green) !important;
}
.ms-stat-label {
  font-family: var(--ms-font-head) !important;
  font-weight: 500 !important;
  font-size: 21px !important;
  line-height: 28px !important;
  color: var(--ms-green-gray) !important;
}
.ms-stat-exact {
  font-family: var(--ms-font-head) !important;
  font-weight: 700 !important;
  color: var(--ms-green-deep) !important;
}
.ms-footnote {
  font-family: var(--ms-font-head) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 19px !important;
  color: var(--ms-green-gray) !important;
}
.ms-caption {
  font-family: var(--ms-font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #fff !important;
}

/* ============ buttons ============ */

.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 11px;
  border-radius: var(--ms-radius);
  border: 1px solid transparent;
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ms-btn--cream { background-color: var(--ms-btn-cream); color: var(--ms-ink); }
.ms-btn--cream:hover { background-color: #F2F6D0; }
.ms-btn--teal { background-color: var(--ms-btn-teal); color: #fff; }
.ms-btn--teal:hover { background-color: #004E60; }
.ms-btn--outline { background-color: transparent; border-color: var(--ms-navy); color: var(--ms-navy); }
.ms-btn--outline:hover { background-color: var(--ms-navy); color: #fff; }
.ms-btn:active { transform: translateY(1px); }
.ms-btn:focus-visible { outline: 2px solid var(--ms-btn-teal); outline-offset: 2px; }

/* ============ components ============ */

.ms-card {
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-card);
}
.ms-caption-chip {
  background-color: var(--ms-caption-bg);
  padding: 18px 25px;
}
.ms-pill {
  display: inline-block;
  border-radius: var(--ms-radius);
  padding: 6px 14px;
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ms-ink);
}
.ms-pill--blue { background-color: var(--ms-pill-blue); }
.ms-pill--green { background-color: var(--ms-pill-green); }
.ms-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  padding: 8px 12px;
  border-radius: 50px;
  background-color: var(--ms-green-deep);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ms-arrow:hover { background-color: #00684F; }

@media (prefers-reduced-motion: reduce) {
  .ms-btn, .ms-arrow { transition: none; }
  .ms-btn:active { transform: none; }
}