/* ============================================================
   GROUNDWORK CX — TYPOGRAPHY TOKENS
   Display: Montserrat (headings, key moments — geometric, strong)
   Body/UI: Inter (all body & interface — neutral, highly legible)
   Scale & line-heights mirror the brand type hierarchy.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* @kind font */

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind other */
  --fw-regular:   400; /* @kind other */
  --fw-medium:    500; /* @kind other */
  --fw-semibold:  600; /* @kind other */
  --fw-bold:      700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* ---- Type scale (px) — from brand hierarchy ---- */
  --fs-h1:    48px;  --lh-h1: 56px;  --ls-h1: -0.01em;
  --fs-h2:    32px;  --lh-h2: 40px;  --ls-h2: -0.005em;
  --fs-h3:    24px;  --lh-h3: 32px;  --ls-h3: 0; /* @kind other */
  --fs-h4:    18px;  --lh-h4: 28px;  --ls-h4: 0; /* @kind other */
  --fs-body:  16px;  --lh-body: 24px;
  --fs-small: 14px;  --lh-small: 20px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-display: 64px; --lh-display: 70px; --ls-display: -0.02em; /* @kind other */

  /* ---- Eyebrow / label (ALL CAPS, used sparingly) ---- */
  --ls-eyebrow: 0.14em; /* @kind other */
  --fs-eyebrow: 12px;
}

/* ---- Heading presets ---- */
.gw-display, .gw-h1, .gw-h2, .gw-h3, .gw-h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.gw-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); }
.gw-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-h1); }
.gw-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h2); }
.gw-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.gw-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-medium); }

/* ---- Body presets ---- */
.gw-body   { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--text-body); }
.gw-small  { font-family: var(--font-body); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }
.gw-caption{ font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); }

/* ---- Eyebrow: navy or gold, tracked caps — section labels ---- */
.gw-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}