/* DESIGN SYSTEM APPLIED
   ============================================================================
   AI WEB STUDIO - WARSTWA SPÓJNOŚCI (18.08.2026, decyzja @UX po pomiarze 23 podstron)
   Ładowana na KAŻDEJ podstronie zaraz po global.css / styles.css. Jedno źródło prawdy dla tego,
   co ma być identyczne w całym serwisie; wszystko inne (układ, sceny, ruch) zostaje w plikach stron.

   POMIAR PRZED (computed style, Playwright 1440 px):
   - 3 dialekty typografii: strona główna = Sora 600/800 + Inter; stare podstrony = Space Grotesk 800 WERSALIKI
     (H2 46-69 px) + etykiety w pigułkach; nowe sceny = Space Grotesk 500 + etykiety w monospace.
   - przyciski: 6 kształtów (prostokąt r=2 WERSALIKI 12-13 px · pigułka 999 · r=14 · r=0 mono · granatowy r=0 Sora 24 px).
   - karty: promienie 0 / 2 / 4 / 8 / 12 / 14 / 16 / 18 / 20 / 22 / 24 / 28 px.
   - 7 rodzin: Space Grotesk, Outfit, Sora, Inter, Crimson Text, Cormorant Garamond, JetBrains Mono (+ ui-monospace).

   DECYZJA (@UX, „less but better"):
   - 2 rodziny: Space Grotesk (nagłówki, liczby, etykiety, przyciski) + Outfit (tekst). Monospace TYLKO w oknach kodu.
   - wagi: Outfit 400 (tekst) / 600 (wyróżnienie); Space Grotesk 500 (nagłówki, liczby) / 700 (etykiety, przyciski).
   - nagłówki bez wersalików, tracking -.03em, interlinia 1.05; etykiety = wersaliki 0.68 rem, tracking .16em, bez pigułki.
   - przycisk = pigułka 999 px, Space Grotesk 700, .86 rem, bez wersalików; karty = 16 px (duże) / 12 px (małe).
   - kolory: tylko tokeny marki niżej (krem, kość, grafit, brąz, złoto). Strona główna: --bg z #F4F7FE na krem.

   Reguły z !important to ŚWIADOMA egzekucja tokenów (zastępują ~120 rozproszonych deklaracji per strona).
   Wyjątek per strona = też !important, z komentarzem dlaczego. Bez tej warstwy każdy nowy plik odjeżdżał w swoją stronę.
   ============================================================================ */

:root{
  /* płótno i tekst */
  --krem:#F7F5F2;  --kosc:#FCFAF7;  --biel:#FFFFFF;
  --grafit:#1A1D23; --szary:#585D66; --granat:#0B1120; --noc:#070A12;
  /* akcent */
  --braz:#8C5A0F;  --braz2:#6E4709; --zloto:#E9A825; --zloto2:#C99A4E; --zloto3:#E4B872;
  --linia:rgba(26,29,35,.12);
  /* typografia */
  --font-naglowek:'Space Grotesk',sans-serif;
  --font-tekst:'Outfit',sans-serif;
  --font-kod:ui-monospace,'Cascadia Code','JetBrains Mono',Consolas,'Liberation Mono',monospace;
  --mono:'Space Grotesk',sans-serif;          /* etykiety w scenach używały tego tokenu jako monospace - teraz to Space Grotesk */
  --wyj:cubic-bezier(.16,1,.3,1);
  /* skala */
  --h1:clamp(2.5rem,5.2vw,4.6rem);
  --h2:clamp(2rem,4.2vw,3.6rem);
  --h3:clamp(1.15rem,1.7vw,1.4rem);
  --promien:16px; --promien-maly:12px; --pigulka:999px;
  --cien-karty:0 30px 60px rgba(26,29,35,.08),0 3px 10px rgba(26,29,35,.04);
  /* strona główna: jej własne tokeny (--bg/--ink/--line) były zimne (#F4F7FE / #E2E8F4) - reszta serwisu jest ciepła */
  --bg:#F7F5F2 !important; --line:#E2DCD3 !important; --card:#FFFFFF !important;
}

/* ---------- 1. TEKST ---------- */
body{font-family:var(--font-tekst) !important;-webkit-font-smoothing:antialiased}
main p, main li, main dd, main td, main label, main input, main textarea, main select, main summary, body > section p, body > header p, body > div p{font-family:var(--font-tekst)}
strong:not(nav *):not(footer *), b:not(nav *):not(footer *){font-weight:600}

/* ---------- 2. NAGŁÓWKI (jedna waga, bez wersalików) ---------- */
h1:not(nav *):not(footer *), h2:not(nav *):not(footer *), h3:not(nav *):not(footer *), h4:not(nav *):not(footer *){
  font-family:var(--font-naglowek) !important;
  font-weight:500 !important;
  text-transform:none !important;
  letter-spacing:-.03em !important;
  line-height:1.05 !important;
}
/* rozmiary: JEDNA skala dla całego serwisu (Wiki 18.08: „wielkość liter ma być okej” = taka sama) - wyjątek strony = nadpisanie
   tokenu --h1/--h2 w jej własnym :root, nigdy rozmiaru w regule */
h1:not(nav *):not(footer *){font-size:var(--h1) !important}
h2:not(nav *):not(footer *){font-size:var(--h2) !important}
h3:not(nav *):not(footer *){font-size:var(--h3) !important}
/* wszystko wewnątrz nagłówka dziedziczy krój i wagę (na głównej szeroki reset ustawiał Outfit na każdym <span>) */
h1 *, h2 *, h3 *, h4 *{font-family:inherit !important;font-weight:inherit !important;letter-spacing:inherit}
h1 strong, h2 strong, h3 strong{font-weight:500}
/* główna: wielki napis-wordmark, napisy scen 3D i akcenty w nich = krój nagłówkowy */
body .hn-line, body .hn-line i, body .pw2-lin, body .pw2-lin i, body .display, body .display *, body .reveal-line, body .reveal-line *, body .hp-h, body .uc-h, body .qp-h, body .hc-h{font-family:var(--font-naglowek) !important}
body .hp-h, body .uc-h, body .qp-h, body .hc-h, body .odd-txt, body .big, body .rp-liczba, body .branze-name, body .c-stat .big, body .stat2 .big{font-weight:500 !important}
h4:not(nav *):not(footer *){letter-spacing:-.02em !important;line-height:1.2 !important}
/* druga linia nagłówka z akcentem: stare strony rysowały ją konturem (.text-stroke), sceny kolorem - jeden język = kolor brązu */
h1 .text-stroke, h2 .text-stroke, h1 .text-stroke-dark, h2 .text-stroke-dark, h3 .text-stroke{color:var(--braz) !important;-webkit-text-stroke:0 !important}
body .se-ciemna h2 .text-stroke, body .u-koszt h2 .text-stroke, main [style*="background:#0B1120"] h2 .text-stroke{color:var(--zloto3) !important}
/* liczby-dowody i wielkie cyfry: ta sama waga co nagłówki */
body .cs-num, body .st-licz, body .stat-num-big, body .rk-liczba, body .rk-duza, body .bo-num, body .cena-kwota, body .price-num,
body .op-rank-oc i, body .op-naklejka b, body .tk-sv b, body .sh-licz, body .hx-dowod .sh-licz, body .lj-liczba, body .drab-cena, body .c-tyt, body .pk-obieg-kwota b, body .pk-cena, body .roi-duza, body .rk-godz-w b, body .roi-box b, body .op-kwota b{font-family:var(--font-naglowek) !important;font-weight:500 !important}

/* ---------- 3. ETYKIETY (małe wersaliki nad nagłówkiem, numeracja, podpisy) ---------- */
body .label, body .hx-eyebrow, body .sh-eyebrow, body .uk-etyk, body .form-label,
body .se-mono, body .op-mono, body .nl-mono, body .lj-mono, body .wa-mono, body .rp-mono,
body .cs-etyk, body .bo-etyk, body .pk-poziom, body .pk-za, body .rk-zr, body .rk-zrodlo, body .stat-num-source, body .stat-num-label,
body .op-rank-nag, body .op-rank-stopka, body .oc-nota, body .st-stopka, body .tk-pod, body .tk-sv small, body .mk-nag, body .mk-etyk, body .mk-pill,
body .hx-dowod small, body .cs-karta small, body .fz-nr, body .ak-nr i, body .bo-czas small, body .pkg-name, body .pkg-unit,
body .hx-rzad span, body .hx-zauf li,
body [class*="eyebrow"]:not(nav *):not(footer *), body [class*="kicker"]:not(nav *):not(footer *), body [class*="-lab"]:not(nav *):not(footer *), body [class="lab"], body [class$="-zr"]:not(nav *):not(footer *), body [class*="-eta"]:not(nav *):not(footer *), body [class*="etyk"]:not(nav *):not(footer *), body [class*="podpis"]:not(nav *):not(footer *), body [class*="-hint"]:not(nav *):not(footer *), body [class*="mini-tyt"]:not(nav *):not(footer *), body [class*="-badge"]:not(nav *):not(footer *), body [class*="-tag"]:not(nav *):not(footer *){
  font-family:var(--font-naglowek) !important;
  font-weight:700 !important;
  text-transform:uppercase;
}
body .label{border:0 !important;padding:0 !important;border-radius:0 !important;background:transparent !important;letter-spacing:.16em !important;font-size:.68rem !important}
body .form-label{text-transform:uppercase}

/* ---------- 4. PRZYCISKI (jedna pigułka) ---------- */
body a[class*="btn"]:not(nav *):not(footer *):not(.faq-btn):not(.hn-btn-okno):not(.hn-btn-in),
body button[class*="btn"]:not(nav *):not(footer *):not(.faq-btn):not(.ak-b),
body a[class*="cta"]:not(nav *):not(footer *), body button[class*="cta"]:not(nav *):not(footer *), .pkg-cta{
  border-radius:var(--pigulka) !important;
  font-family:var(--font-naglowek) !important;
  font-weight:700 !important;
  text-transform:none !important;
  letter-spacing:.04em !important;
  cursor:pointer;
}
body .btn{font-size:.86rem;padding:15px 30px}
body .btn-acid:hover, body .btn-accent:hover{background:var(--braz2) !important;color:#fff !important}
body .btn-ghost{border:1px solid rgba(140,90,15,.45);color:var(--braz)}
body .btn-ghost:hover{background:rgba(140,90,15,.07);border-color:var(--braz);color:var(--braz2)}

/* ---------- 5. KARTY, POLA, LINIE ---------- */
body .card{border-radius:var(--promien) !important;border-top-width:1px !important}
body .form-input, body .form-textarea, main select.form-input{border-radius:8px !important;background:var(--krem);font-family:var(--font-tekst)}
main details summary{font-family:var(--font-naglowek);font-weight:500}
body .lj-k{border-radius:var(--promien-maly)}                          /* plansza lejka: komórki miały 0 px */
body .pricing-card, body .stat-tile, body .boost-card, body .boost-step, body .rk-kafel, body .m-row, body .metkrok, body .phase-item{border-radius:var(--promien)}
body .marquee-track span{font-weight:500 !important}                  /* pas haseł: ta sama waga co nagłówki */

/* ---------- 6. WYJĄTKI (świadome) ---------- */
/* okna kodu i „stara strona" w atrapie na głównej zostają w swoich krojach - to cytaty cudzego wyglądu, nie nasz język */
body .wa-okno pre{font-family:var(--font-kod) !important}
body .oldsite, body .oldsite *{font-family:Georgia,'Times New Roman',serif !important}