/* /assets/css/site-typography.css */

/* === (A) Self-host (opcjonalnie) ===
   Skopiuj pliki .woff2 do /assets/fonts/ i odkomentuj:
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-VariableFont_slnt,wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
*/

/* === Zmienne globalne (brand + typografia) === */
:root{
  /* rodziny fontów */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* rozmiary i line-height (bazowe) */
  --fs-base: 16px;
  --lh-base: 1.6;

  /* wagi */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* skala nagłówków (możesz zmienić per-strona) */
  --fs-h1: clamp(20px, 1.6rem, 28px);
  --fs-h2: clamp(18px, 1.35rem, 24px);
  --fs-h3: clamp(16px, 1.15rem, 20px);

  /* kolory text/linków (biały motyw) */
  --c-text: #111;
  --c-muted: #6b7280;
  --c-link: #1E40AF;       /* indigo 800 &#8212; czytelny i elegancki */
  --c-link-hover: #1D4ED8; /* indigo 700 */
}

/* === Reset lekkiej wagi + baza === */
html{ font-size: var(--fs-base); }
body{
  margin:0;
  color: var(--c-text);
  background:#fff;
  font-family: var(--font-sans);
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--c-link); text-decoration: underline; }
a:hover{ color: var(--c-link-hover); }

small, .text-sm{ font-size: 0.875rem; line-height: 1.5; color: var(--c-muted); }
.muted{ color: var(--c-muted); }

/* Nagłówki bazują na zmiennych &#8212; nic nie &#8222;betonujemy&#8221; */
h1{ font-size: var(--fs-h1); font-weight: var(--fw-semibold); margin: .6em 0 .4em; }
h2{ font-size: var(--fs-h2); font-weight: var(--fw-semibold); margin: .6em 0 .4em; }
h3{ font-size: var(--fs-h3); font-weight: var(--fw-medium);  margin: .6em 0 .4em; }

/* Przykładowe utility &#8212; możesz używać wszędzie */
.ff-sans{ font-family: var(--font-sans) !important; }
.ff-mono{ font-family: var(--font-mono) !important; }
.fw-400{ font-weight: var(--fw-normal); }
.fw-500{ font-weight: var(--fw-medium); }
.fw-600{ font-weight: var(--fw-semibold); }
.fw-700{ font-weight: var(--fw-bold); }