<div class="fp-control-section">
  <span class="fp-label">Sample Text — Heading</span>
  <input class="fp-input-text" id="fp-heading-text" type="text" value="The quick brown fox" />
</div>

<div class="fp-control-section">
  <span class="fp-label">Sample Text — Body</span>
  <input class="fp-input-text" id="fp-body-text" type="text" value="Good typography improves readability and sets the tone of your content. Pair a strong heading font with a legible body font for best results." />
</div>

<div class="fp-control-section">
  <span class="fp-label">Heading Size</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-heading-size" type="range" min="18" max="72" value="40" />
    <span class="fp-range-val" id="fp-heading-size-val">40px</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">Body Size</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-body-size" type="range" min="12" max="28" value="16" />
    <span class="fp-range-val" id="fp-body-size-val">16px</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">Line Height</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-line-height" type="range" min="100" max="220" value="165" />
    <span class="fp-range-val" id="fp-line-height-val">1.65</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">Letter Spacing (body)</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-letter-spacing" type="range" min="-5" max="20" value="0" />
    <span class="fp-range-val" id="fp-letter-spacing-val">0em</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">Preview Text Color</span>
  <div class="fp-color-row" id="fp-color-swatches">
    <button class="fp-swatch active" data-color="#1a1a1a" style="background:#1a1a1a;" title="Near-black"></button>
    <button class="fp-swatch" data-color="#2d3748" style="background:#2d3748;" title="Slate"></button>
    <button class="fp-swatch" data-color="#1a365d" style="background:#1a365d;" title="Navy"></button>
    <button class="fp-swatch" data-color="#4a1d2e" style="background:#4a1d2e;" title="Burgundy"></button>
    <button class="fp-swatch" data-color="#065f46" style="background:#065f46;" title="Forest"></button>
    <button class="fp-swatch" data-color="#374151" style="background:#374151;" title="Cool gray"></button>
    <button class="fp-swatch" data-color="#f8f9fa" style="background:#f8f9fa; border: 1.5px solid #dee2e6;" title="Near-white"></button>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">Preview Background</span>
  <div class="fp-color-row" id="fp-bg-swatches">
    <button class="fp-swatch active" data-bg="#ffffff" style="background:#ffffff; border:1.5px solid #dee2e6;" title="White"></button>
    <button class="fp-swatch" data-bg="#f8f9fa" style="background:#f8f9fa; border:1.5px solid #dee2e6;" title="Light gray"></button>
    <button class="fp-swatch" data-bg="#fefce8" style="background:#fefce8;" title="Cream"></button>
    <button class="fp-swatch" data-bg="#eff6ff" style="background:#eff6ff;" title="Blue-tint"></button>
    <button class="fp-swatch" data-bg="#0f172a" style="background:#0f172a;" title="Dark"></button>
    <button class="fp-swatch" data-bg="#1e293b" style="background:#1e293b;" title="Slate-dark"></button>
  </div>
</div>