/* ============================================================
   TOKENS.CSS — Wizytówka na Topie
   ------------------------------------------------------------
   Jedyne miejsce, w którym żyją kolory, fonty, odstępy i czasy.
   style.css korzysta wyłącznie z tych zmiennych.
   ============================================================ */

/* ------------------------------------------------------------
   0. FONTY — self-hosted, tylko używane grubości
   Inter — jedyny font na stronie (display i tekst), zgodnie z
   makietą referencyjną. Plik wariabilny 400–900, dwa zestawy
   znaków (polskie diakrytyki są w obu: ą/ć/ę/ł/ń/ś/ź/ż w
   Extended-A, ó w Latin-1).
   ------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0304, U+0308, U+0329;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

/* ------------------------------------------------------------
   1. TOKENY
   ------------------------------------------------------------ */
:root {

  /* --- Kolory ------------------------------------------------
     Ciemne tło + zielony akcent nie jest tu domyślnością na ślepo:
     zielona pinezka i zielony przycisk "Zadzwoń" to kolor samego
     interfejsu Google Maps / Wizytówki Google — produktu, który
     ta strona sprzedaje. Karty na jasnym --tlo-alt dają oddech
     bez wychodzenia z ciemnej bazy. */
  --tlo:            #0E0E0E;
  --tlo-alt:        #17191C;
  --tlo-karta:      #1A1D21;
  --tekst:          #F4F5F6;
  --tekst-cichy:    #A0A5AD;
  --tekst-odwrotny: #06210F;
  --akcent:         #21C45D;
  --akcent-ciemny:  #1AA34D;
  --akcent-tlo:     #12261A;
  --destrukcyjny:   #EF4444;
  --linia:          #2A2D32;

  /* --- Typografia ---------------------------------------------
     Inter — jedyny font na całej stronie (display i tekst),
     zgodnie z makietą referencyjną Wizytówka na Topie.html.
     Rozmiary poniżej to dokładne wartości z tej makiety. */
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-tekst:   "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --tekst-xs:   13px;
  --tekst-s:    15px;
  --tekst-m:    16px;
  --tekst-l:    18px;
  --tekst-h3:   19px;
  --tekst-h2:   clamp(28px, 4vw, 42px);
  --tekst-h1:   clamp(34px, 5vw, 56px);

  --waga-tekst:   400;
  --waga-srednia: 600;
  --waga-mocna:   800;

  --interlinia-tekst:    1.6;
  --interlinia-naglowek: 1.15;
  --tracking-naglowek:   -0.02em;

  /* --- Odstępy ------------------------------------------------ */
  --odstep-3xs: 0.25rem;
  --odstep-2xs: 0.5rem;
  --odstep-xs:  0.75rem;
  --odstep-s:   1rem;
  --odstep-m:   1.5rem;
  --odstep-l:   2.5rem;
  --odstep-xl:  4rem;
  --odstep-2xl: 6rem;
  --odstep-sekcja: clamp(3.5rem, 8vw, 6.5rem);

  /* --- Kształt i głębia --------------------------------------- */
  --promien-s: 4px;
  --promien-m: 12px;
  --promien-l: 20px;
  --promien-tabletka: 999px;
  --cien-s: 0 2px 8px rgb(0 0 0 / 0.25);
  --cien-m: 0 10px 30px rgb(0 0 0 / 0.35);
  --cien-l: 0 20px 60px rgb(0 0 0 / 0.45);
  --cien-akcent: 0 10px 28px rgb(33 196 93 / 0.35);

  /* --- Ruch ---------------------------------------------------
     Mikrointerakcje 150–250 ms, wejście hero 400–600 ms. */
  --czas-szybko: 180ms;
  --czas-srednio: 380ms;
  --czas-wolno: 600ms;
  --krzywa: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* --- Układ ---------------------------------------------------- */
  --szerokosc-tresci: 74rem;
  --szerokosc-czytania: 62ch;
  --wysokosc-nawigacji: 4.5rem;

  /* --- Warstwy -------------------------------------------------- */
  --z-tlo: 0;
  --z-tresc: 10;
  --z-sticky-cta: 80;
  --z-nawigacja: 90;
  --z-menu: 100;
}

/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wysokosc-nawigacji) + var(--odstep-s));
}

body {
  min-height: 100svh;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--tekst-m);
  font-weight: var(--waga-tekst);
  line-height: var(--interlinia-tekst);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body:has(.menu-checkbox:checked) { overflow: hidden; }

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

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

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

/* ------------------------------------------------------------
   3. ELEMENTY BAZOWE
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--waga-mocna);
  line-height: var(--interlinia-naglowek);
  letter-spacing: var(--tracking-naglowek);
  text-wrap: balance;
}

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

p { text-wrap: pretty; }
p, li { max-width: var(--szerokosc-czytania); }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* ------------------------------------------------------------
   4. NARZĘDZIA
   ------------------------------------------------------------ */
.kontener {
  width: min(100% - 2 * var(--odstep-m), var(--szerokosc-tresci));
  margin-inline: auto;
}

.sekcja { padding-block: var(--odstep-sekcja); }
.sekcja--alt { background: var(--tlo-alt); }

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

.ukryte { position: absolute; left: -9999px; }

.center { text-align: center; margin-inline: auto; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-tekst);
  font-size: var(--tekst-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--akcent);
  margin-bottom: var(--odstep-s);
}
.lead { font-size: var(--tekst-l); color: var(--tekst-cichy); max-width: 38rem; }

/* ------------------------------------------------------------
   5. FOCUS
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 3px;
  border-radius: var(--promien-s);
}

/* ------------------------------------------------------------
   6. MENU MOBILNE — checkbox hack, bez JS
   ------------------------------------------------------------ */
.menu-checkbox:checked ~ .menu-mobilne {
  transform: none;
  visibility: visible;
  opacity: 1;
}

.menu-mobilne {
  transform: translateY(-8px);
  visibility: hidden;
  opacity: 0;
  transition: transform var(--czas-srednio) var(--krzywa), opacity var(--czas-srednio) var(--krzywa);
}

@media (min-width: 64rem) {
  .menu-przycisk { display: none; }
}

/* ------------------------------------------------------------
   7. STICKY CTA (mobile)
   ------------------------------------------------------------ */
.cta-mobile {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky-cta);
  display: flex;
  gap: var(--odstep-2xs);
  padding: var(--odstep-2xs);
  padding-bottom: calc(var(--odstep-2xs) + env(safe-area-inset-bottom));
  background: var(--tlo-karta);
  border-top: 1px solid var(--linia);
}

.cta-mobile a {
  flex: 1;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--odstep-2xs);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--promien-m);
  background: var(--akcent);
  color: var(--tekst-odwrotny);
}

@media (min-width: 48rem) {
  .cta-mobile { display: none; }
}

@media (max-width: 47.99rem) {
  body.ma-cta-mobile { padding-bottom: 4.5rem; }
}

/* ------------------------------------------------------------
   8. OGRANICZONY RUCH
   ------------------------------------------------------------ */
@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;
  }
}

/* ------------------------------------------------------------
   9. DRUK
   ------------------------------------------------------------ */
@media print {
  .cta-mobile, header, .bez-druku { display: none !important; }
  body { background: #fff; color: #000; }
}