/* ══════════════════════════════════════════════════════════════════════
   BASE - reset, fonty, typografia bazowa, zachowanie dokumentu.
   Zero stylowania komponentow. To warstwa, na ktorej stoi cala reszta.
   ══════════════════════════════════════════════════════════════════════ */

/* ── FONTY ────────────────────────────────────────────────────────────
   Pliki zmienne (variable), self-hosted - brak zaleznosci zewnetrznych,
   brak zapytania do obcego serwera. Podzial na latin i latin-ext oznacza,
   ze przegladarka pobiera drugi plik dopiero gdy trafi na polski znak
   diakrytyczny. */

@font-face {
  font-family: 'Afacad';
  src: url('../fonts/afacad-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: 'Afacad';
  src: url('../fonts/afacad-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── RESET ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* `auto`, NIE `smooth` - plynnosc niesie teraz Lenis (js/plynny-scroll.js),
     ktory wygladza takze zwykle przewijanie kolkiem, nie tylko skok do
     kotwicy. Dwa mechanizmy wygladzania jednoczesnie bija sie o te sama
     pozycje i przewijanie szarpie. Bez JS zostaje skok natychmiastowy. */
  scroll-behavior: auto;
  /* kotwice nie chowaja sie pod przyklejonym naglowkiem - obowiazuje przy
     skoku natywnym (bez JS); z Lenisem ten sam luz liczy plynny-scroll.js */
  scroll-padding-top: calc(var(--h-header) + var(--s-6));

  /* ── PASEK PRZEWIJANIA: SCISZONY, NIE UKRYTY ───────────────────────
     Zgloszenie brzmialo "ukryc scrollbar" - i tego akurat NIE robimy,
     bo pasek nie jest ozdoba, tylko kontrolka. Ukrycie kosztuje trzy
     rzeczy naraz, wszystkie po stronie uzytkownika:

     1. Przeciaganie. Na Windowsie bez gladzika to podstawowy sposob
        pokonania dlugiej strony, a dla osoby z ograniczona motoryka
        czesto jedyny wygodny - kolko wymaga wielu powtorzen tego samego
        ruchu. `scrollbar-width: none` zabiera sam uchwyt, nie tylko
        jego wyglad.
     2. Informacje, ile zostalo. Strona glowna ma kilkanascie ekranow;
        bez paska nic nie mowi, czy jestesmy na poczatku, czy przy koncu.
     3. Sygnal, ze w ogole jest co przewijac. Serwis ma sekcje wysokie
        na pelny ekran - bez paska pierwszy ekran potrafi wygladac na
        cala tresc.

     WCAG nie zabrania ukrycia paska wprost (nie ma kryterium "pasek musi
     byc widoczny"), ale punkty 1 i 2 to realne bariery, a nie formalnosc.
     Dochodzi do tego 1.4.11 Non-text Contrast: pasek jest kontrolka, wiec
     jesli JUZ go rysujemy, kciuk ma miec 3:1 wzgledem tla.

     Rozwiazanie zdejmuje to, co faktycznie przeszkadzalo - jasnoszary,
     systemowy pasek Windowsa krzyczacy na ciemnej stronie - a zostawia
     dzialanie. Kciuk bierze `--c-border-kontrolka` (**3,13** na kanwie,
     ten sam token co obrysy pol formularza), biezna jest przezroczysta.

     `scrollbar-gutter: stable` naprawia przy okazji skok ukladu: menu
     mobilne ustawia `overflow: hidden` na `body`, wiec pasek znikal razem
     z przewijaniem i tresc przeskakiwala w prawo o jego szerokosc.
     Rezerwacja miejsca kasuje ten skok bez ani jednej linii JS. */
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-kontrolka) transparent;
  scrollbar-gutter: stable;
}

/* Przegladarki sprzed obslugi `scrollbar-color` (Safari, starszy Chromium)
   - ten sam efekt starym zapisem WebKit. Blok jest w `@supports not`, wiec
   tam, gdzie dziala standard, nie ma dwoch definicji tej samej rzeczy. */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--c-border-kontrolka);
    border-radius: 999px;
    /* obwodka w kolorze tla robi wciecie - kciuk nie dotyka krawedzi okna
       i czyta sie jako pigulka, a nie jako pasek przyklejony do ramki */
    border: 2px solid var(--c-bg);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--c-border-kontrolka-hover); }
}

body {
  min-height: 100svh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* poziomy scroll nigdy nie moze wystapic - sekcje pelnoszerokie
     i canvas 3D potrafia go wygenerowac przypadkiem */
  overflow-x: clip;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

/* ── TYPOGRAFIA BAZOWA ───────────────────────────────────────────────
   Naglowki w kroju marki, zaciesnione i o ciasnej interlinii - Afacad
   przy duzych stopniach rozjezdza sie przy domyslnych ustawieniach. */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-display);
  text-wrap: balance;          /* naglowki nie zostawiaja sierot */
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { text-wrap: pretty; }

strong { font-weight: var(--w-semi); }

/* liczby techniczne maja rowna szerokosc znaku - inaczej tabele
   i parametry "tancza" przy zmianie wartosci */
.tabular { font-variant-numeric: tabular-nums; }

/* ── STANY DOSTEPNOSCI ──────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-brand);
  color: #fff;
}

/* skip link - widoczny dopiero po sfokusowaniu klawiatura */
.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-up);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* tekst wylacznie dla czytnikow ekranu */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── PREFERENCJA OGRANICZONEGO RUCHU ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}