/* ==========================================================================
   base.css – fonty, tokeny, motywy, reset, układ „stage", przyciski
   Podejście: mobile-first.  <700px telefon · ≥700px tablet · ≥1280px desktop.
   Desktop odwzorowuje projekt Figma (ramka 1728 px) i skaluje się proporcjonalnie
   przez zmienną --u  (1 jednostka projektu = --u). Powyżej 1728 px układ jest centrowany.
   ========================================================================== */

@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-300.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-400.woff") format("woff"); }
/* UWAGA: oficjalny Poppins SemiBold nie był dostępny – plik 600 to Poppins Medium
   (pogrubiony obrysem, patrz sekcja „SemiBold" niżej). Podmień na prawdziwy SemiBold. */
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-600.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/poppins-700.woff") format("woff"); }

:root {
  /* jednostka projektu: 1728 px projektu = 100% szerokości kontenera (max 1px na jednostkę) */
  --u: min(1px, calc(100cqw / 1728));

  --bg: #000;
  --font-1: #fff;        /* Figma: Font 1 */
  --font-2: #afafaf;     /* Figma: Font 2 */
  --font-3: #cacaca;
  --font-4: #9f9f9f;
  --font-5: #979797;
  --font-6: #8b8b8b;
  --rule: #363636;       /* Figma: Line 9 */
  --green: #93dd8f;      /* punkt listy (pomiar ze zrzutu) */
  --ghost: rgba(255, 255, 255, 0.13);
  --ff: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ff-btn: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --accent: #8372c8;     /* Purple */
  --ls: 0.02em;
  --ls-semi: 0.0266em;   /* 2% + kompensacja szerokości SemiBold */
}
html[data-theme="emerald"] { --accent: #57bdcb; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--bg); color: var(--font-1);
  font-family: var(--ff); font-weight: 400; line-height: 1.5; letter-spacing: var(--ls);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 300;
  padding: 10px 16px; background: #fff; color: #000; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

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

/* ---------- Motywy: wersje grafik ---------- */
html[data-theme="emerald"] .t-purple { display: none !important; }
html:not([data-theme="emerald"]) .t-emerald { display: none !important; }

/* ---------- Kontenery (jednostka --u liczona względem szerokości kontenera) ---------- */
main, .site-footer, .site-header { container-type: inline-size; }
.section { position: relative; }
.stage { position: relative; width: 100%; max-width: 1728px; margin-inline: auto; }

/* ---------- Tytuły i teksty sekcji ---------- */
.section-title {
  font-weight: 600; font-size: clamp(28px, 7.6vw, 36px); line-height: 1.12;
  letter-spacing: var(--ls-semi); text-align: center; text-wrap: balance;
}
.section-lead { color: var(--font-3); font-size: 15px; line-height: 1.55; text-align: center; text-wrap: pretty; }

/* linia-ozdobnik pozioma (Figma: Line 3/4/10) – TYMCZASOWO CSS, docelowo SVG */
.line-h {
  display: block; width: min(300px, 70%); height: 3px; margin-inline: auto;
  background: linear-gradient(90deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 78%);
}

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; border: 0;
  font-family: var(--ff); text-decoration: none; cursor: pointer; transition: opacity .2s ease, background-color .2s ease;
}
.btn:hover { opacity: .86; }
.btn--white { background: #fff; color: #000; font-weight: 600; letter-spacing: var(--ls-semi); }
.btn--ghost { background: var(--ghost); color: #fff; font-weight: 600; letter-spacing: var(--ls-semi); }
.btn--accent {   /* komponent Material 3 „Button" z Figmy */
  position: relative; gap: 8px; width: 145px; height: 40px; padding: 10px 16px; border-radius: 12px;
  background: var(--accent); color: #fff;
  font: 500 14px/20px var(--ff-btn); letter-spacing: 0.1px; white-space: nowrap;
}
.btn--accent::after { content: ""; position: absolute; inset: -4px 0; }  /* większy obszar kliknięcia */

/* ---------- Poppins SemiBold (600) – emulacja ----------
   Medium + obrys ≈ SemiBold. Usuń ten blok po podmianie pliku poppins-600.woff na oficjalny. */
.hero__title, .about__title, .section-title, .tile__price, .tile__name, .tile__list-title,
.btn--white, .btn--ghost, .footer__about, .footer__ask {
  -webkit-text-stroke: 0.0285em currentColor;
  paint-order: stroke fill;
}

/* ---------- Pomocnicze pozycjonowanie desktopowe (współrzędne z Figmy) ---------- */
@media (min-width: 1280px) {
  .pos { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
  .pos[style*="--w"] { width: calc(var(--w) * var(--u)); }   /* szerokość tylko, gdy podano --w */
  .pos--cy { transform: translateY(-50%); }                 /* --y = środek w pionie */
  .pos--cx { transform: translateX(-50%); }                 /* --x = środek w poziomie */
  .pos--cx.pos--cy { transform: translate(-50%, -50%); }
  .pos--r  { left: auto; right: calc((1728 - var(--x)) * var(--u)); }   /* --x = prawa krawędź */
  .section { height: calc(var(--h) * var(--u)); }
  .section .stage { height: 100%; }
}