{% comment %}Podgląd typografii - pokazuje ustawienia ZAPISANE w bazie (site_settings),
   nie te wpisane przed chwilą w formularzu. Panel nie wciąga krojów serwisu,
   więc arkusze (pakiet dlis-fonts) dokłada tu sam podgląd.{% endcomment %}
{% for href in site_settings.font_stylesheets %}
  <link rel="stylesheet" href="{{ href }}">
{% endfor %}
<div class="border-t border-slate-200 pt-4 dark:border-slate-800">
  <p class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Podgląd</p>
  <div class="mt-3 border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-950"
       style="font-family: {{ site_settings.font_body_stack }}; font-size: {{ site_settings.base_font_size }}px;">
    <p class="text-slate-900 dark:text-slate-100"
       style="font-family: {{ site_settings.font_headings_stack }}; font-weight: {{ site_settings.heading_weight }}; font-size: 1.75em; line-height: 1.2;">
      Przykładowy nagłówek
    </p>
    <p class="mt-2 text-slate-600 dark:text-slate-300">
      Zażółć gęślą jaźń - tak wygląda tekst w Twoim serwisie.
    </p>
  </div>
  <p class="help">Podgląd pokazuje zapisane ustawienia - odśwież po zapisaniu zmian.</p>
</div>