/* PSC — podstawa typograficzna witryny (nowa identyfikacja 14.10.2026).
   Kolejność arkuszy: tokeny.css (kolory jasny/ciemny) → kroje/kroje.css → podstawa.css → styl.css → arkusze modułów.
   Ten plik ustala TYLKO warstwę bazową: krój, rytm, zmienne szerokości, elementy HTML, odnośniki, fokus, tabele,
   formularze, wąski ekran, ograniczony ruch, druk. Komponenty i układ stron są w styl.css; jedyne klasy tutaj:
   .drobne, .niewidoczne, .przewijane, .dz-<k> (tylko zmienne). Selektory elementów są w :where() (zerowa waga).
   Kolory wyłącznie ze zmiennych tokenów. Kontrast (WCAG 2.2): tekst ≥ 4,5:1, obramowania elementów sterujących,
   fokus i znaczniki ≥ 3:1 — w obu trybach (małe znaczniki JTI z brzegiem --dz-obrys).
   --linia służy tylko do separatorów ozdobnych; ramki pól i przycisków mają --obwodka. */

/* ───── zmienne układu i skali ───── */
:root {
  --kroj: "IBM Plex Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kroj-znak: "Tektur", "IBM Plex Sans", system-ui, sans-serif;   /* wyłącznie znak, pełne logo, tytuły marketingowe */
  --kroj-staly: ui-monospace, "SFMono-Regular", "Cascadia Mono", "DejaVu Sans Mono", monospace;

  --szer-strony: 1280px;          /* treść do ok. 1200–1320 px */
  --szer-tekstu: 34.5em;          /* tekst ciągły: ok. 76 znaków w wierszu przy 18 px (zmierzone; 72ch dawało ok. 95) */
  --szer-waska: 28em;             /* lead, podpisy, krótkie kolumny: ok. 60 znaków */
  --margines: clamp(16px, 4.5vw, 56px);   /* boczny margines strony: 16 px na telefonie, 56 px na dużym ekranie */
  --odstep-sekcji: clamp(3.5rem, 2rem + 6vw, 8rem);
  --zaokr: 10px;
  --zaokr-maly: 6px;
  --cien: 0 1px 2px rgb(0 0 0 / .05), 0 6px 24px rgb(0 0 0 / .06);

  /* skala nagłówków: płynna między 360 px a 1440 px */
  --t-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4.25rem);
  --t-h2: clamp(1.625rem, 1.3rem + 1.45vw, 2.625rem);
  --t-h3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --t-h4: 1.125rem;
  --t-lead: clamp(1.125rem, 1.05rem + .45vw, 1.375rem);
  --t-drobne: .875rem;            /* 15,75 px przy 18 px */
  --t-mikro: .78rem;              /* 14 px: nadtytuły, etykiety */

  /* brzeg znacznika dziedziny (kropka, węzeł, belka): pomarańcz JTI ma na jasnym tle 2,4–2,7:1, więc jego
     brzeg ma kolor napisu JTI (#8A5200, ≥ 5,7:1); w trybie ciemnym napis = grafika, więc to samo. */
  --dz-cyb-obrys: var(--dz-cyb); --dz-jti-obrys: var(--dz-jti-napis); --dz-tch-obrys: var(--dz-tch);
  --dz-log-obrys: var(--dz-log); --dz-brak-obrys: var(--dz-brak);
}

/* ───── podstawa ───── */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 112.5%;              /* 18 px przy domyślnych 16 px; skaluje się z ustawieniem użytkownika */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
  hanging-punctuation: first;
}
html { scrollbar-color: var(--obwodka) var(--tlo); }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--kroj);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* ───── nagłówki: nowoczesne, ciasne, półgrube ───── */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 .5em;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--tekst);
}
:where(h1) { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.028em; font-weight: 600; }
:where(h2) { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.02em; }
:where(h3) { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
:where(h4) { font-size: var(--t-h4); line-height: 1.35; letter-spacing: 0; }
:where(h5, h6) { font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
:where(* + h2) { margin-top: 1.9em; }
:where(* + h3) { margin-top: 1.8em; }
:where(* + h4) { margin-top: 1.5em; }

/* ───── tekst ciągły ───── */
:where(p, ul, ol, dl, blockquote, figure, table, pre) { margin: 0 0 1.1em; }
:where(p) { text-wrap: pretty; }
:where(ul, ol) { padding-left: 1.4em; }
:where(li + li) { margin-top: .3em; }
:where(li > ul, li > ol) { margin: .3em 0 0; }
:where(dt) { font-weight: 600; }
:where(dd) { margin: 0 0 .6em; }
:where(strong, b) { font-weight: 600; }
:where(em, i, cite) { font-style: italic; }
:where(small), .drobne { font-size: var(--t-drobne); line-height: 1.5; }
.drobne { color: var(--tekst-2); }
:where(abbr[title]) { text-decoration: underline dotted; text-underline-offset: .15em; cursor: help; }
:where(sub, sup) { font-size: .72em; line-height: 0; }
:where(hr) { border: 0; border-top: 1px solid var(--linia); margin: 2.5rem 0; }
:where(mark) { background: var(--wyroznienie); color: inherit; padding: 0 .12em; border-radius: 3px; }
:where(code, kbd, samp, pre) { font-family: var(--kroj-staly); font-size: .9em; }
:where(kbd) {
  display: inline-block; min-width: 1.6em; padding: .05em .4em; text-align: center;
  border: 1px solid var(--obwodka); border-bottom-width: 2px; border-radius: 4px;
  font-size: .78em; line-height: 1.4; color: var(--tekst-2); background: var(--karta);
}
:where(pre) { overflow-x: auto; padding: 1rem 1.2rem; background: var(--pomocnicza); border-radius: var(--zaokr-maly); }
:where(img, svg, video, canvas) { max-width: 100%; height: auto; }
:where(img, video) { display: block; }

/* cytat (definicja) z podpisem źródła */
:where(blockquote) {
  margin-inline: 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--akcent);
}
:where(figcaption) { margin-top: .6em; font-size: var(--t-drobne); line-height: 1.5; color: var(--tekst-2); }

/* ───── odnośniki ───── */
:where(a) {
  color: var(--odnosnik);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
:where(a:hover) { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
:where(a:visited) { color: var(--odnosnik); }

/* ───── fokus: zawsze widoczny, 2 px, ≥ 3:1 w obu trybach ───── */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.niewidoczne {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(button) { font: inherit; color: inherit; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea) {
  font: inherit; font-size: 1rem; color: var(--tekst);
  background: var(--karta); border: 1px solid var(--obwodka); border-radius: var(--zaokr-maly);
  padding: .55em .8em; min-height: 44px;
}
:where(input::placeholder, textarea::placeholder) { color: var(--tekst-2); opacity: 1; }
:where(input[type=checkbox], input[type=radio]) { width: 1.1em; height: 1.1em; margin: 0 .45em 0 0; vertical-align: -.15em; accent-color: var(--akcent); }
:where(label) { cursor: pointer; }

/* ───── dziedziny: klasa .dz-<k> ustawia lokalne zmienne --dz, --dz-napis, --dz-tlo, --dz-obrys (wypełnienie,
   napis, tło etykiety, brzeg znacznika — mały znacznik: wypełnienie --dz + brzeg 1,5 px --dz-obrys).
   Kolor dziedziny jest etykietą i znacznikiem, nie barwą tytułu ani akapitu. Wyglądu tu nie nadaje. ───── */

/* ───── formularze ───── */
.dz-cyb  { --dz: var(--dz-cyb);  --dz-napis: var(--dz-cyb-napis);  --dz-tlo: var(--dz-cyb-tlo);  --dz-obrys: var(--dz-cyb-obrys); }
.dz-jti  { --dz: var(--dz-jti);  --dz-napis: var(--dz-jti-napis);  --dz-tlo: var(--dz-jti-tlo);  --dz-obrys: var(--dz-jti-obrys); }
.dz-tch  { --dz: var(--dz-tch);  --dz-napis: var(--dz-tch-napis);  --dz-tlo: var(--dz-tch-tlo);  --dz-obrys: var(--dz-tch-obrys); }
.dz-log  { --dz: var(--dz-log);  --dz-napis: var(--dz-log-napis);  --dz-tlo: var(--dz-log-tlo);  --dz-obrys: var(--dz-log-obrys); }
.dz-brak { --dz: var(--dz-brak); --dz-napis: var(--dz-brak-napis); --dz-tlo: var(--dz-brak-tlo); --dz-obrys: var(--dz-brak-obrys); }
/* ───── tabele ───── */
:where(table) { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
:where(th, td) { padding: .6em .8em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linia); }
:where(th) { font-weight: 600; font-size: var(--t-drobne); color: var(--tekst-2); border-bottom-color: var(--obwodka); }
:where(caption) { caption-side: top; text-align: left; font-weight: 600; margin-bottom: .5em; }
.przewijane { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-color: var(--obwodka) transparent; scrollbar-width: thin; }
/* ───── chiński ───── */
:lang(zh) { line-height: 1.75; letter-spacing: .02em; hanging-punctuation: none; }
:where(h1, h2, h3, h4):lang(zh) { line-height: 1.3; letter-spacing: .01em; }
em:lang(zh), i:lang(zh), cite:lang(zh) { font-style: normal; font-weight: 600; }  /* chiński bez sztucznej kursywy */

/* ───── wąski ekran (360 px bez przewijania w poziomie) ───── */
@media (max-width: 640px) {
  html { scroll-padding-top: 4rem; }
  :where(h1) { letter-spacing: -.02em; }
  :where(blockquote) { padding-left: .9em; }
  :where(th, td) { padding: .5em .55em; }
  .przewijane > table { min-width: 32rem; }
}

/* ───── ograniczony ruch ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ───── druk ───── */
@media print {
  :root { --tlo: #fff; --karta: #fff; --pomocnicza: #fff; --tekst: #000; --tekst-2: #000; --odnosnik: #000; --linia: #999; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  :where(a) { color: #000; text-decoration: none; }
  :where(h1, h2, h3) { break-after: avoid; }
  :where(blockquote, figure, table) { break-inside: avoid; }
}