/* =============================
   ZMIENNE (domyslnie: jasny)
   + auto dark przez prefers-color-scheme
   + wymuszenie przez [data-theme]
============================= */

:root {
  --tlo0: #f8fafc;
  --tlo1: #ffffff;
  --karta: #ffffff;
  --karta2: #f1f5f9;
  --tlo-panelu: #ffffff;
  --obrys: #e2e8f0;
  --tekst: #0f172a;
  --muted: #64748b;

  --surface: rgba(255,255,255,.86);
  --surface2: rgba(255,255,255,.72);
  --border: rgba(15, 23, 42, .14);

  --tekst-przycisk: #0f172a;

  --a: #4f46e5;
  --b: #0ea5e9;
  --cta: #2563EB;
  --ctb: #7C3AED;

  --ziel: #16A34A;
  --zolty: #CA8A04;
  --czerw: #E11D48;

  --radius: 12px;
  --radius2: 20px;
  --cien: 0 10px 15px -3px rgba(0,0,0,.05), 0 4px 6px -2px rgba(0,0,0,.02);

  --kontener: 1300px;
  --pad: clamp(18px, 3vw, 28px);

  --h1: clamp(28px, 3.8vw, 52px);
  --h2: clamp(22px, 2.6vw, 34px);
  --lead: clamp(16px, 1.3vw, 18px);

  --menu-mobile-bg: #0B1220;
  --menu-mobile-tekst: #F8FAFC;
  --menu-mobile-obrys: rgba(255,255,255,.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo0: #070A12;
    --tlo1: #0B1020;
    --karta: rgba(255,255,255,.06);
    --karta2: rgba(255,255,255,.04);
    --tlo-panelu: #161b22;
    --obrys: rgba(255,255,255,.12);
    --tekst: #EAF0FF;
    --muted: rgba(234,240,255,.72);
    --surface: rgba(255,255,255,.07);
    --surface2: rgba(255,255,255,.05);
    --border: rgba(255,255,255,.14);
    --tekst-przycisk: #F8FAFC;
    --a: #1e1641;
    --b: #1d4e8a;
    --cta: #60A5FA;
    --ctb: #A78BFA;
    --cien: 0 20px 60px rgba(0,0,0,.45);
  }
}

:root[data-theme="light"] {
  --tlo0: #F7F8FC;
  --tlo1: #EEF2FF;
  --karta: rgba(255,255,255,.72);
  --karta2: rgba(255,255,255,.52);
  --tlo-panelu: #ffffff;
  --obrys: rgba(15, 23, 42, .12);
  --tekst: #0B1220;
  --muted: rgba(15, 23, 42, .72);
  --surface: rgba(255,255,255,.86);
  --surface2: rgba(255,255,255,.72);
  --border: rgba(15, 23, 42, .14);
  --tekst-przycisk: #0B1220;
  --a: #251a37;
  --b: #271be5;
  --cta: #2563EB;
  --ctb: #7C3AED;
  --cien: 0 20px 60px rgba(2,6,23,.18);
}

:root[data-theme="dark"] {
  --tlo0: #070A12;
  --tlo1: #0B1020;
  --karta: rgba(255,255,255,.06);
  --karta2: rgba(255,255,255,.04);
  --tlo-panelu: #161b22;
  --obrys: rgba(255,255,255,.12);
  --tekst: #EAF0FF;
  --muted: rgba(234,240,255,.72);
  --surface: rgba(255,255,255,.07);
  --surface2: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.14);
  --tekst-przycisk: #F8FAFC;
  --a: #1e1641;
  --b: #1d4e8a;
  --cta: #60A5FA;
  --ctb: #A78BFA;
  --cien: 0 20px 60px rgba(0,0,0,.45);
}

/* =============================
   RESET / BAZA
============================= */

html, body { height: 100%; }

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--tekst);
  background: linear-gradient(82deg, var(--tlo0) 0%, var(--tlo1) 100%);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
p { margin: 0 0 10px; }
ul, ol { padding-left: 18px; }
img { max-width: 100%; height: auto; }

.kontener {
  width: min(var(--kontener), calc(100% - 2*var(--pad)));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.link-pomin {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--karta2);
  border: 1px solid var(--obrys);
  transform: translateY(-140%);
  z-index: 200;
}
.link-pomin:focus { transform: translateY(0); }

.muted { color: var(--muted); }

/* =============================
   PRZYCISKI
============================= */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--tekst);
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.przycisk:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(2,6,23,.12);
  text-decoration: none;
}
.przycisk:active { transform: translateY(0); }

.przycisk.primary {
  border-color: color-mix(in oklab, var(--border) 40%, white);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--a) 92%, transparent),
    color-mix(in oklab, var(--b) 86%, transparent));
  color: #fff;
}

.przycisk.ghost { background: transparent; }
.przycisk.wide { width: 100%; }

.przycisk-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--obrys);
  background: var(--karta2);
  cursor: pointer;
  font-weight: 700;
  color: var(--tekst-przycisk);
}
.przycisk-ikona:hover { background: var(--surface); text-decoration: none; }

/* =============================
   ALERTY
============================= */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--obrys);
  background: var(--karta2);
  margin-bottom: 14px;
}
.alert.sukces { border-color: color-mix(in oklab, var(--ziel) 40%, var(--obrys)); color: var(--ziel); }
.alert.blad   { border-color: color-mix(in oklab, var(--czerw) 40%, var(--obrys)); color: var(--czerw); }
.alert.uwaga  { border-color: color-mix(in oklab, var(--zolty) 40%, var(--obrys)); color: var(--zolty); }

/* =============================
   TABELA
============================= */

.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--obrys);
  border-radius: var(--radius);
  overflow: hidden;
}
.tabela th,
.tabela td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--obrys);
  vertical-align: top;
}
.tabela thead th {
  background: color-mix(in oklab, var(--karta2) 72%, transparent);
  font-size: .92rem;
  color: var(--muted);
  letter-spacing: .02em;
}
.tabela tbody tr:last-child td { border-bottom: none; }

/* =============================
   FORMULARZE
============================= */

.formularz label {
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
  font-weight: 700;
}
.formularz input,
.formularz textarea,
.formularz select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--obrys);
  background: var(--karta2);
  color: var(--tekst);
  font-size: 1rem;
}
.formularz textarea { min-height: 120px; resize: vertical; }

/* =============================
   KARTA
============================= */

.karta {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}

/* =============================
   SIATKA
============================= */

.siatka-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.siatka-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* =============================
   REVEAL (animacja)
============================= */

.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .przycisk:hover { transform: none; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* =============================
   ODZNAKA STATUSU
============================= */

.odznaka-statusu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  border: 1px solid var(--obrys);
  background: var(--karta2);
}
.odznaka-statusu.ok    { border-color: color-mix(in oklab, var(--ziel) 40%, var(--obrys)); color: var(--ziel); }
.odznaka-statusu.uwaga { border-color: color-mix(in oklab, var(--zolty) 40%, var(--obrys)); color: var(--zolty); }
.odznaka-statusu.blad  { border-color: color-mix(in oklab, var(--czerw) 40%, var(--obrys)); color: var(--czerw); }

/* =============================
   IKONY W PRZELACZNIKU TEMATU
============================= */

.ikona { display: block; }
html[data-theme="light"] .ikona-slonce  { display: none; }
html[data-theme="dark"]  .ikona-ksiezyc { display: none; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ikona-ksiezyc { display: none; }
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .ikona-slonce  { display: none; }
}

/* =============================
   RESPONSYWNOSC
============================= */

@media (max-width: 980px) {
  .siatka-2,
  .siatka-3 { grid-template-columns: 1fr; }
}

/* DEBUGOWANIE: baza.css v1 - tenSEO */