/* Reset, typografia, siatka i przyciski. Tylko tokeny semantyczne z tokens.css / fonts.css. */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Tło strony zmienia js/scroll-bg.js (html[data-scroll-bg], tokens.css). */
  background: var(--gs-page-bg);
  color: var(--gs-ink);
  transition:
    background-color var(--gs-dur-bg) var(--gs-ease-inout),
    color var(--gs-dur-bg) var(--gs-ease-inout);
  font-family: var(--gs-font-text);
  font-size: var(--gs-body-size);
  line-height: var(--gs-body-leading);
  -webkit-font-smoothing: antialiased;
}

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

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--gs-font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--gs-h-variation);
  text-wrap: balance;
}

h1 {
  font-size: var(--gs-h1-size);
  font-weight: var(--gs-h1-weight);
  letter-spacing: var(--gs-h1-tracking);
  line-height: var(--gs-h1-leading);
}

h2 {
  font-size: var(--gs-h2-size);
  font-weight: var(--gs-h2-weight);
  letter-spacing: var(--gs-h2-tracking);
  line-height: var(--gs-h2-leading);
}

h3 {
  font-size: var(--gs-h3-size);
  font-weight: var(--gs-h3-weight);
  letter-spacing: var(--gs-h3-tracking);
  line-height: var(--gs-h3-leading);
}

p {
  margin: 0;
}

/* Lekkość (runda 1): nagłówki w ink, akapity w <main> w szarości --gs-text. Specyficzność typu, więc
   kolor ustawiony w sekcji wygrywa. Ciemne konteksty przestawiają --gs-text (.gs-sheet, tryb ink). */
:where(#main) {
  color: var(--gs-ink);
}

:where(#main) p {
  color: var(--gs-text);
}

b,
strong {
  font-weight: var(--gs-weight-strong);
}

a {
  color: var(--gs-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition:
    color var(--gs-dur) var(--gs-ease),
    text-decoration-color var(--gs-dur) var(--gs-ease),
    text-underline-offset var(--gs-dur) var(--gs-ease);
}

@media (hover: hover) {
  a:hover {
    text-underline-offset: 0.3em;
  }
}

/* Na czas zmiany tła strony (js/scroll-bg.js) kolory w <main> przechodzą razem z tłem. Zerowa
   specyficzność: elementy z własnym transition zostają przy swoim. */
:where(html[data-scroll-bg-anim] #main, html[data-scroll-bg-anim] #main *) {
  transition:
    background-color var(--gs-dur-bg) var(--gs-ease-inout),
    color var(--gs-dur-bg) var(--gs-ease-inout),
    border-color var(--gs-dur-bg) var(--gs-ease-inout);
}

.gs-small {
  font-size: var(--gs-small-size);
  line-height: var(--gs-small-leading);
  letter-spacing: var(--gs-small-tracking);
}

/* Ceny zawsze w kroju tekstowym, cyfry tabelaryczne, kolor rodzica (nie szarość akapitu) */
.gs-price {
  color: inherit;
  font-family: var(--gs-font-text);
  font-size: var(--gs-price-size);
  font-weight: var(--gs-price-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.gs-container {
  width: 100%;
  max-width: var(--gs-container-max);
  margin-inline: auto;
  padding-inline: var(--gs-container-pad);
}

/* Rytm sekcji (96 / 80 / 64, tokens.css): sąsiednie sekcje dzielą jeden odstęp, a nie sumują dwóch.
   Każda sekcja <main> poza pierwszą (hero przy nagłówku) ma tylko odstęp górny. Za ostatnią odstęp daje
   stopka (każdy wariant S-A/S-B/S-C ma własny odstęp u góry). Sekcja w bloku wariantu (outlet) liczy się
   tak samo, bo blok ma display: contents.
   Jedna reguła dla całej strony (w WP: base.css motywu); sekcje nie ustawiają własnego padding-block,
   poza dolnym odstępem pasa (--gs-strip-pad, P-2). */
:where(#main > section, #main > [data-vg] > section) {
  padding-block: var(--gs-section-space) 0;
}

:where(#main > section:first-child) {
  padding-block-start: 0;
}

.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gs-space-2);
  height: 48px;
  padding-inline: var(--gs-space-6);
  border: 1px solid transparent;
  border-radius: var(--gs-radius-btn);
  font-family: var(--gs-btn-font);
  font-size: var(--gs-btn-size);
  font-weight: var(--gs-btn-weight);
  letter-spacing: var(--gs-btn-tracking);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--gs-dur) var(--gs-ease),
    border-color var(--gs-dur) var(--gs-ease),
    color var(--gs-dur) var(--gs-ease),
    transform var(--gs-dur-fast) var(--gs-ease);
}

.gs-btn:active {
  transform: scale(0.98);
}

.gs-btn--primary {
  background: var(--gs-btn-primary-bg, var(--gs-ink));
  color: var(--gs-btn-primary-fg, var(--gs-bg));
}

.gs-btn--brand {
  background: var(--gs-brand);
  color: var(--gs-on-brand);
}

.gs-btn--ghost {
  background: transparent;
  color: var(--gs-btn-ghost-fg, var(--gs-ink));
  border-color: var(--gs-btn-ghost-border, var(--gs-ink));
}

/* Hover: wypełnienie rozjaśnia się o 14% w stronę koloru napisu (działa też na odwróconych przyciskach
   w arkuszach i na zdjęciu); ghost dostaje delikatne tło w kolorze napisu. */
@media (hover: hover) {
  .gs-btn--primary:hover {
    background: color-mix(in srgb, var(--gs-btn-primary-bg, var(--gs-ink)) 86%, var(--gs-btn-primary-fg, var(--gs-bg)));
  }

  .gs-btn--brand:hover {
    background: var(--gs-brand-deep);
  }

  .gs-btn--ghost:hover {
    background: color-mix(in srgb, var(--gs-btn-ghost-fg, var(--gs-ink)) 7%, transparent);
  }
}

.gs-chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: var(--gs-space-4);
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius-pill);
  background: var(--gs-bg);
  color: var(--gs-ink);
  font-family: var(--gs-chip-font);
  font-weight: var(--gs-weight-medium);
  font-size: var(--gs-btn-size);
  text-decoration: none;
  cursor: pointer;
}

.gs-sheet {
  background: var(--gs-sheet-bg);
  color: var(--gs-sheet-fg);
  --gs-text: var(--gs-sheet-text);
  --gs-focus: var(--gs-sheet-fg);
  --gs-link: var(--gs-sheet-fg);
  --gs-btn-primary-bg: var(--gs-sheet-fg);
  --gs-btn-primary-fg: var(--gs-sheet-bg);
  --gs-btn-ghost-fg: var(--gs-sheet-fg);
  --gs-btn-ghost-border: var(--gs-sheet-fg);
}

:focus-visible {
  outline: 2px solid var(--gs-focus);
  outline-offset: 2px;
}

/* Obwódka fokusu tylko przy klawiaturze. Po dotyku/kliknięciu (html[data-input='pointer'], js/drawer.js)
   przeglądarki potrafią pokazać ją na fokusie ustawionym skryptem (tytuł szuflady, powrót na „Menu”).
   Tytuły z tabindex="-1" dostają fokus tylko dla czytników, więc obwódki nie mają nigdy. */
html[data-input='pointer'] :focus-visible,
[tabindex='-1']:focus {
  outline: none;
}

/* Pierścienie rysowane pseudo-elementem (nagłówek H-5/V2, karty V2, konfigurator, Urządź wnętrze). */
html[data-input='pointer'] .gs-hc .gs-hc__link:focus-visible::before {
  border-color: transparent;
}

html[data-input='pointer'] .v2-card__link:focus-visible::after,
html[data-input='pointer'] .v2-konf__pop-link:focus-visible::after,
html[data-input='pointer'] .v2-insp__tile:focus-visible .v2-insp__media {
  outline: none;
}

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

/* Link „Przejdź do treści”: poza ekranem, z fokusem klawiatury w lewym górnym rogu nad nagłówkiem. */
.gs-skip {
  position: absolute;
  z-index: 1000;
  top: var(--gs-space-2);
  left: var(--gs-space-2);
  padding: var(--gs-space-3) var(--gs-space-4);
  border-radius: var(--gs-radius-btn);
  background: var(--gs-ink);
  color: var(--gs-bg);
  font-weight: var(--gs-weight-strong);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--gs-space-4)));
}

.gs-skip:focus-visible {
  transform: none;
}