/* Strony pobierania i instalacji Danaco Too (statyczne, poza klientem SPA). Wartości = tokeny Too, motyw ciemny
   (contracts/design-tokens.json); arkusz nie zmienia wyglądu aplikacji (src/styles). */
@font-face { font-family: Inter; src: url('/fonty/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Figtree; src: url('/fonty/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Cascadia Code'; src: url('/fonty/cascadia.woff2') format('woff2'); font-display: swap; }
:root {
  --s-tlo: #0D0F17; --s-pow: #191B25; --s-pow-2: #1F2230; --s-linia: #292C37;
  --s-tekst: #F9FAFE; --s-tekst-2: #C8CCD6; --s-tekst-3: #9A9EA9;
  --s-akcent: #A298FE; --s-akcent-wyp: #754DF7; --s-too: #2EE6C8; --s-uwaga: #DF9728; --s-uwaga-tlo: #2F1C01; --s-ok: #44C384;
  --s-zorza: linear-gradient(120deg, #8A72FE 0%, #3BA7FF 55%, #2EE6C8 100%);
  --s-blask-fiolet: #7B5CFF38; --s-blask-turkus: #2EE6C826;
  --s-ui: Inter, "Segoe UI", Roboto, system-ui, sans-serif; --s-nag: Figtree, Inter, system-ui, sans-serif; --s-mono: "Cascadia Code", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Poświata jako cień wewnętrzny (nie gradient): tło pozostaje jednolitym kolorem, więc kontrast tekstu da się zmierzyć. */
body { margin: 0; min-height: 100vh; background-color: var(--s-tlo); box-shadow: inset 360px 280px 320px -180px var(--s-blask-fiolet), inset -280px 220px 320px -190px var(--s-blask-turkus); color: var(--s-tekst); font: 15px/1.6 var(--s-ui); }
a { color: var(--s-akcent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--s-akcent-wyp); outline-offset: 2px; }
.s-belka { display: flex; align-items: center; gap: 10px; max-width: 1080px; margin: 0 auto; padding: 18px 24px; }
.s-belka img { width: 28px; height: 28px; }
.s-belka b { font: 700 17px var(--s-nag); }
.s-belka nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.s-belka nav a { color: var(--s-tekst-2); text-decoration: none; }
.s-belka nav a[aria-current=page] { color: var(--s-tekst); }
main { max-width: 1080px; margin: 0 auto; padding: 8px 24px 64px; }
h1 { font: 800 clamp(32px, 5vw, 52px)/1.1 var(--s-nag); margin: 28px 0 14px; letter-spacing: -.02em; }
h1 span { color: var(--s-akcent); } /* jednolity kolor zamiast tekstu z gradientem: mierzalny kontrast (jak na stronie głównej) */
h2 { font: 700 24px/1.25 var(--s-nag); margin: 44px 0 14px; }
h3 { font: 700 17px/1.3 var(--s-nag); margin: 0 0 6px; }
.s-wstep { font-size: 18px; color: var(--s-tekst-2); max-width: 760px; }
.s-siatka { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.s-karta { background: var(--s-pow); border: 1px solid var(--s-linia); border-radius: 16px; padding: 20px; }
.s-karta p { margin: 4px 0 0; color: var(--s-tekst-2); font-size: 14px; }
.s-pobierz { display: flex; flex-direction: column; gap: 10px; }
.s-przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--s-akcent-wyp); color: #fff; font-weight: 600; text-decoration: none; }
.s-przycisk--obrys { background: transparent; color: var(--s-tekst); border: 1px solid var(--s-linia); }
.s-meta { font-size: 12px; color: var(--s-tekst-3); overflow-wrap: anywhere; }
.s-meta code { font: 12px var(--s-mono); color: var(--s-tekst-2); }
.s-uwaga { border: 1px solid var(--s-uwaga); background: var(--s-uwaga-tlo); border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.s-uwaga b { color: var(--s-uwaga); }
.s-zrzuty { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.s-zrzuty figure { margin: 0; }
.s-zrzuty img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--s-linia); display: block; }
.s-zrzuty figcaption { font-size: 13px; color: var(--s-tekst-3); margin-top: 6px; }
ol.s-kroki { padding-left: 22px; } ol.s-kroki li { margin: 8px 0; }
pre, code { font-family: var(--s-mono); }
pre { background: var(--s-pow-2); border: 1px solid var(--s-linia); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--s-linia); vertical-align: top; }
td code { overflow-wrap: anywhere; }
footer { max-width: 1080px; margin: 0 auto; padding: 24px; color: var(--s-tekst-3); font-size: 13px; border-top: 1px solid var(--s-linia); }