/* ============================================================
   Mulligan Funding — Typography Tokens
   Source: MF Design System Figma file
   ============================================================ */

:root {

  /* ── Font Families ────────────────────────────────────────── */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Roboto Mono', 'Courier New', monospace;

  /* ── Font Weights ─────────────────────────────────────────── */
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* ── Type Scale ───────────────────────────────────────────── */
  --font-size-hero-1:   40px;
  --font-size-hero-2:   32px;
  --font-size-h1:       28px;
  --font-size-h2:       24px;
  --font-size-h3:       20px;
  --font-size-h4:       18px;
  --font-size-p1:       18px;
  --font-size-p2:       16px;
  --font-size-p3:       14px;
  --font-size-tagline1: 14px;
  --font-size-tagline2: 12px;
  --font-size-mono:     12px;

  /* ── Line Heights ─────────────────────────────────────────── */
  --line-height-hero-1:   50px;
  --line-height-hero-2:   40px;
  --line-height-h1:       36px;
  --line-height-h2:       32px;
  --line-height-h3:       28px;
  --line-height-h4:       24px;
  --line-height-p1:       28px;
  --line-height-p2:       24px;
  --line-height-p3:       20px;
  --line-height-tagline1: 20px;
  --line-height-tagline2: 20px;
  --line-height-mono:     20px;

  /* ── Letter Spacing ───────────────────────────────────────── */
  --letter-spacing-default:  0;
  --letter-spacing-tagline:  0.10em;
  --letter-spacing-body:     0.03em;
  --letter-spacing-label:    0.05em;

  /* ── Semantic aliases ─────────────────────────────────────── */
  --text-display-font:    var(--font-display);
  --text-body-font:       var(--font-body);
  --text-ui-font:         var(--font-body);
  --text-code-font:       var(--font-mono);
}

/* ── Global resets ──────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-p2);
  line-height: var(--line-height-p2);
  color: var(--color-text-body, #1E1E1E);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Utility classes ────────────────────────────────────────── */
.text-hero-1 { font-family: var(--font-display); font-size: var(--font-size-hero-1); line-height: var(--line-height-hero-1); font-weight: var(--font-weight-semibold); }
.text-hero-2 { font-family: var(--font-display); font-size: var(--font-size-hero-2); line-height: var(--line-height-hero-2); font-weight: var(--font-weight-semibold); }
.text-h1     { font-family: var(--font-display); font-size: var(--font-size-h1);     line-height: var(--line-height-h1);     font-weight: var(--font-weight-semibold); }
.text-h2     { font-family: var(--font-display); font-size: var(--font-size-h2);     line-height: var(--line-height-h2);     font-weight: var(--font-weight-semibold); }
.text-h3     { font-family: var(--font-display); font-size: var(--font-size-h3);     line-height: var(--line-height-h3);     font-weight: var(--font-weight-medium); }
.text-h4     { font-family: var(--font-display); font-size: var(--font-size-h4);     line-height: var(--line-height-h4);     font-weight: var(--font-weight-medium); }
.text-p1     { font-family: var(--font-display); font-size: var(--font-size-p1);     line-height: var(--line-height-p1);     font-weight: var(--font-weight-regular); }
.text-p2     { font-family: var(--font-body);    font-size: var(--font-size-p2);     line-height: var(--line-height-p2);     font-weight: var(--font-weight-regular); }
.text-p3     { font-family: var(--font-body);    font-size: var(--font-size-p3);     line-height: var(--line-height-p3);     font-weight: var(--font-weight-regular); }
.text-tagline1 { font-family: var(--font-display); font-size: var(--font-size-tagline1); line-height: var(--line-height-tagline1); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-tagline); text-transform: uppercase; }
.text-tagline2 { font-family: var(--font-display); font-size: var(--font-size-tagline2); line-height: var(--line-height-tagline2); font-weight: var(--font-weight-bold);     letter-spacing: var(--letter-spacing-tagline); text-transform: uppercase; }
.text-mono   { font-family: var(--font-mono);    font-size: var(--font-size-mono);   line-height: var(--line-height-mono);   font-weight: var(--font-weight-medium); }