Font Pairing Tool — Find Perfect Heading & Body Font Combinations

<!-- Info strip -->
<div class="fp-info-strip" id="fp-info-strip">
  <span class="fp-info-item"><strong>Heading:</strong> <span id="fp-info-heading">—</span></span>
  <span class="fp-info-item"><strong>Body:</strong> <span id="fp-info-body">—</span></span>
  <span class="fp-info-item"><strong>Style:</strong> <span id="fp-info-style">—</span></span>
</div>

<!-- Controls -->
<div class="fp-card" style="margin-bottom:16px;">
  <h3>Customize</h3>
  <div class="fp-controls">
    <div class="fp-control-group" style="grid-column:1/-1;">
      <label>Sample Text</label>
      <input type="text" id="fp-sample-text" value="The quick brown fox jumps over the lazy dog" />
    </div>
    <div class="fp-control-group">
      <label>Heading Size <span class="fp-val" id="fp-heading-size-val">2.4rem</span></label>
      <input type="range" id="fp-heading-size" min="1.2" max="4.5" step="0.1" value="2.4" />
    </div>
    <div class="fp-control-group">
      <label>Body Size <span class="fp-val" id="fp-body-size-val">1rem</span></label>
      <input type="range" id="fp-body-size" min="0.75" max="1.5" step="0.05" value="1" />
    </div>
    <div class="fp-control-group">
      <label>Line Height <span class="fp-val" id="fp-line-height-val">1.6</span></label>
      <input type="range" id="fp-line-height" min="1.0" max="2.5" step="0.05" value="1.6" />
    </div>
    <div class="fp-control-group">
      <label>Letter Spacing <span class="fp-val" id="fp-letter-spacing-val">0em</span></label>
      <input type="range" id="fp-letter-spacing" min="-0.05" max="0.2" step="0.005" value="0" />
    </div>
    <div class="fp-control-group">
      <label>Heading Color</label>
      <input type="color" id="fp-heading-color" value="#1a1a2e" />
    </div>
    <div class="fp-control-group">
      <label>Body Color</label>
      <input type="color" id="fp-body-color" value="#374151" />
    </div>
  </div>

  <div class="fp-section-title">Preview Mode</div>
  <div class="fp-mode-tabs">
    <button class="fp-mode-tab active" data-mode="blog">Blog Post</button>
    <button class="fp-mode-tab" data-mode="hero">Hero Section</button>
    <button class="fp-mode-tab" data-mode="card">Card Layout</button>
  </div>
</div>

<!-- Preview -->
<div class="fp-preview-wrap">
  <div class="fp-preview-label">Live Preview</div>
  <div id="fp-preview"></div>
</div>

<!-- CSS Output -->
<div class="fp-card">
  <h3>CSS Code</h3>
  <div class="fp-css-box">
    <pre id="fp-css-output"></pre>
    <button class="fp-copy-btn" id="fp-copy-btn">Copy CSS</button>
  </div>
</div>