/* WIDGET — scalone tokeny + style (eksport). Źródło: _ds/widget-design-system-c5bad7da-4994-4b88-8dd5-ffa46ce6face */

/* ---- tokens/colors.css ---- */
/* WIDGET — kolory. Nazwy bazowe zgodne z „System designu 1.0", str. 5 i 14. */
:root{
/* granaty — powaga, sekcje ciemne */
--navy-900:#0E2430;--navy-800:#143543;
/* błękity marki — akcent i interakcja */
--blue-700:#1F5866;--blue-600:#2C6E7C;--blue-400:#6FA7B4;--blue-300:#9FC4CC;--blue-200:#C9DFE4;--blue-100:#EAF2F4;
/* neutralne */
--ink:#16232B;--gray-700:#3C4E56;--gray-500:#5C7078;--gray-400:#78909A;--gray-300:#C0CCD1;--gray-200:#D9E2E5;--gray-100:#E9EEF0;--gray-50:#F4F7F8;--white:#FFFFFF;
/* semantyczne */
--success:#22794A;--error:#C03A2B;--warning:#9A6700;
/* --- aliasy semantyczne (używaj ich w komponentach) --- */
--text-primary:var(--ink);--text-secondary:var(--gray-700);--text-muted:var(--gray-500);
--text-on-dark:var(--white);--text-on-dark-muted:var(--blue-200);--text-accent-on-dark:var(--blue-300);
--text-link:var(--blue-600);--text-link-hover:var(--blue-700);--text-link-on-dark:var(--blue-300);
--surface-base:var(--white);--surface-alt:var(--gray-50);--surface-card:var(--white);--surface-highlight:var(--blue-100);
--surface-dark:var(--navy-900);--surface-dark-alt:var(--navy-800);--surface-inactive:var(--gray-100);
--border-card:var(--gray-200);--border-field:var(--gray-400);--border-divider:var(--gray-300);--border-on-dark:rgba(255,255,255,.14);
--focus-ring:var(--blue-600);--focus-ring-on-dark:var(--blue-300);--focus-glow:rgba(44,110,124,.25);
/* hero: fotografia zawsze pod nakładką granatową 60–75% */
--overlay-hero:rgba(14,36,48,.68);--overlay-hero-strong:rgba(14,36,48,.75);
/* przyciski */
--btn-primary-bg:var(--navy-900);--btn-primary-bg-hover:var(--navy-800);--btn-primary-fg:var(--white);
--btn-primary-dark-bg:var(--blue-300);--btn-primary-dark-bg-hover:var(--blue-200);--btn-primary-dark-fg:var(--navy-900);
--btn-secondary-fg:var(--blue-600);--btn-secondary-border:var(--blue-600);
--btn-disabled-bg:var(--gray-100);--btn-disabled-fg:var(--gray-400);
/* logo — dopuszczone tła (str. 4) */
--logo-safe-bg-1:var(--white);--logo-safe-bg-2:var(--gray-50);--logo-safe-bg-3:var(--blue-100);
}

/* ---- tokens/typography.css ---- */
/* WIDGET — typografia. Manrope (nagłówki) + Inter (tekst i interfejs), str. 7. */
:root{
--font-heading:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--weight-h1:800;--weight-h2:800;--weight-h3:700;--weight-h4:700;
--weight-body:400;--weight-medium:500;--weight-strong:600;
/* rozmiary desktop */
--text-h1:52px;--text-h2:36px;--text-h3:24px;--text-h4:19px;
--text-lead:20px;--text-body:16px;--text-small:14px;--text-overline:13px;
/* rozmiary mobile */
--text-h1-mobile:34px;--text-h2-mobile:28px;--text-h3-mobile:21px;--text-h4-mobile:17px;--text-lead-mobile:18px;
/* interlinie */
--leading-h1:1.08;--leading-h2:1.15;--leading-h3:1.25;--leading-h4:1.35;
--leading-lead:1.55;--leading-body:1.6;--leading-small:1.5;--leading-overline:1.4;
/* światło */
--tracking-heading:-0.015em;--tracking-overline:0.12em;
}

/* ---- tokens/spacing.css ---- */
/* WIDGET — rytm oparty na 8 px (plus 4 px dla mikroodstępów), str. 8. */
:root{
--space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-24:24px;--space-32:32px;--space-48:48px;--space-64:64px;--space-96:96px;
/* odstępy pionowe sekcji: 96–120 px desktop, 64 px mobile */
--section-y:112px;--section-y-mobile:64px;
/* nagłówek sekcji → treść: 32–48 px; karty w siatkach: gap 24–32 px */
--section-heading-gap:40px;--grid-gap:24px;--grid-gap-lg:32px;
--gutter:24px;
/* minimalny cel dotykowy i odstęp między celami (WCAG, str. 6) */
--touch-min:44px;--touch-gap:8px;
}

/* ---- tokens/shape.css ---- */
/* WIDGET — promienie i cienie. Cień zawsze z pigmentem granatu, nigdy czysta czerń (str. 8). */
:root{
--radius-s:10px;   /* przyciski, pola formularzy */
--radius-m:16px;   /* karty */
--radius-l:24px;   /* media, panele hero */
--radius-pill:999px; /* metki, pastylki */
--radius-xs:6px;   /* DODANE poza dokumentem: checkbox i mikroelementy */
--shadow-sm:0 1px 2px rgba(14,36,48,.06);
--shadow-md:0 6px 16px -4px rgba(14,36,48,.12);
--shadow-lg:0 16px 40px -8px rgba(14,36,48,.18);
--border-width:1px;--border-focus-width:2px;--focus-offset:3px;
/* wysokości kontrolek: L — hero, formularze, pasy CTA · M — nagłówek, karty */
--control-h-l:52px;--control-h-m:44px;--field-h:52px;--field-h-mobile:48px;--header-h:72px;--cta-bar-h:64px;
--icon-tile:48px;
}

/* ---- tokens/layout.css ---- */
/* WIDGET — siatka i kontener, str. 8. */
:root{
--container:1240px;--container-padding:24px;--container-padding-mobile:20px;
--columns:12; /* @kind other */
--columns-tablet:6; /* @kind other */
--columns-mobile:4; /* @kind other */
--measure:720px;      /* treść artykułów, 60–75 znaków */
--measure-lead:640px; /* lead pod H1/H2 */
--bp-sm:640px;--bp-lg:1024px;--bp-xl:1280px;
}

/* ---- tokens/motion.css ---- */
/* WIDGET — spokojna dynamika, str. 13. Bez karuzel automatycznych.
   speed-fast: mikrointerakcje (hover, fokus) · speed-base: panele, menu, akordeony
   speed-slow: wejścia sekcji przy scrollu — fade + 12 px w górę, tylko raz */
:root{
--speed-fast:160ms; /* @kind other */
--speed-base:240ms; /* @kind other */
--speed-slow:300ms; /* @kind other */
--ease:cubic-bezier(.2,.6,.3,1); /* @kind other */
--lift-hover:-2px;   /* uniesienie przycisku primary na hover */
--arrow-shift:4px;   /* przesunięcie strzałki w linku na hover */
--section-enter-y:12px;
}

/* ---- tokens/base.css ---- */
/* WIDGET — baza dokumentu: typografia elementów, linki, fokus, ruch. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-base);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-primary);letter-spacing:var(--tracking-heading);margin:0;text-wrap:balance}
h1{font-size:var(--text-h1);line-height:var(--leading-h1);font-weight:var(--weight-h1)}
h2{font-size:var(--text-h2);line-height:var(--leading-h2);font-weight:var(--weight-h2)}
h3{font-size:var(--text-h3);line-height:var(--leading-h3);font-weight:var(--weight-h3)}
h4{font-size:var(--text-h4);line-height:var(--leading-h4);font-weight:var(--weight-h4)}
p{margin:0;text-wrap:pretty}
small{font-size:var(--text-small);line-height:var(--leading-small)}
/* linki w treści: blue-600 z podkreśleniem, hover blue-700; odwiedzone bez zmiany koloru */
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--speed-fast) var(--ease)}
a:hover{color:var(--text-link-hover)}
a:visited{color:var(--text-link)}
/* fokus: obrys 2 px blue-600 z odsunięciem 2–3 px, na ciemnym blue-300 */
:focus-visible{outline:var(--border-focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
.wg-on-dark :focus-visible,.wg-on-dark:focus-visible{outline-color:var(--focus-ring-on-dark)}
/* sekcje ciemne */
.wg-on-dark{color:var(--text-on-dark)}
.wg-on-dark h1,.wg-on-dark h2,.wg-on-dark h3,.wg-on-dark h4{color:var(--text-on-dark)}
.wg-on-dark a{color:var(--text-link-on-dark)}
.wg-on-dark a:hover{color:var(--blue-200)}
/* kontener i rytm sekcji */
.wg-container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--container-padding)}
.wg-section{padding-block:var(--section-y)}
.wg-measure{max-width:var(--measure)}
.wg-lead{font-size:var(--text-lead);line-height:var(--leading-lead);color:var(--text-secondary);max-width:var(--measure-lead)}
.wg-on-dark .wg-lead{color:var(--text-on-dark-muted)}
.wg-overline{font-family:var(--font-body);font-size:var(--text-overline);line-height:var(--leading-overline);font-weight:var(--weight-strong);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-link)}
.wg-on-dark .wg-overline{color:var(--text-accent-on-dark)}
.wg-num{font-variant-numeric:tabular-nums}
::selection{background:var(--blue-200);color:var(--ink)}
@media (max-width:1023px){
:root{--text-h1:var(--text-h1-mobile);--text-h2:var(--text-h2-mobile);--text-h3:var(--text-h3-mobile);--text-h4:var(--text-h4-mobile);--text-lead:var(--text-lead-mobile);--section-y:var(--section-y-mobile);--container-padding:var(--container-padding-mobile);--field-h:var(--field-h-mobile)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}