/*
  Wspolna podstawa dla strony publicznej i panelu: paleta, typografia, focus, przyciski i pola.

  Istnieje, bo do tej pory landing i panel mialy **dwa niezalezne arkusze** i rozjechaly sie tak, jak
  musialy: landing dostal palete, tryb ciemny i wlasne przyciski, a panel zostal na `body` bez tla i
  na natywnej chromie przegladarki (`border: 2px inset`, `border-radius: 0`, brak obwodki focusu).
  Formularz logowania wygladal wiec jak strona z lat dziewiecdziesiatych obok dopracowanej strony
  sprzedazowej — nie z braku CSS, a z braku **jednego** zrodla decyzji wizualnych.

  Zasady: wlasne minimalne komponenty (kontrakt `project_spec.md`), zero zewnetrznych zasobow, jedna
  skala odstepow, cele dotykowe 44x44, kontrast AA w obu motywach, rozmiary w `rem` (webowy
  odpowiednik Dynamic Type).
*/

:root {
  color-scheme: light dark;

  --ink: #0f172a;
  --ink-soft: #475569;
  --paper: #ffffff;
  --paper-soft: #f8fafc;
  --line: #e2e8f0;
  --brand: #1d4ed8;
  --brand-ink: #ffffff;
  --accent: #0f766e;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --warn: #92400e;
  --warn-soft: #fffbeb;
  --ok: #15803d;
  --ok-soft: #f0fdf4;

  --radius: .625rem;
  --gap: 1rem;
  --touch: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf6;
    --ink-soft: #9fb0c4;
    --paper: #0b1220;
    --paper-soft: #111a2b;
    --line: #24314a;
    --brand: #4f7df3;
    --brand-ink: #08101f;
    --accent: #2dd4bf;
    --danger: #fca5a5;
    --danger-soft: #2a1416;
    --warn: #fcd34d;
    --warn-soft: #2a2113;
    --ok: #6ee7a8;
    --ok-soft: #0f2418;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* `1rem`, nie `16px`: rozmiar bazowy idzie za ustawieniem czcionki w przegladarce. */
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand); }

/* Widoczna obwodka focusu jest wymogiem obslugi z klawiatury, nie ozdoba. Do tej pory panel nie
   mial jej wcale — po `Tab` nie bylo widac, gdzie stoi kursor. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: .35rem;
}

/* --- przyciski i linki-akcje --------------------------------------------------------------- */

.btn,
button:not(.link) {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--touch); padding: .55rem 1rem;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: .5rem;
}
.btn:hover,
button:not(.link):hover { border-color: var(--ink-soft); }

.btn-primary,
button.primary {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.btn-primary:hover,
button.primary:hover { filter: brightness(1.08); }

.btn-danger,
button.danger { color: var(--danger); border-color: var(--danger); background: var(--paper); }

/* Akcja wygladajaca jak link (np. „Wycisz") nadal musi miec cel dotykowy. */
button.link {
  font: inherit; color: var(--brand); background: none; border: 0; cursor: pointer;
  min-height: var(--touch); padding: 0 .25rem; text-decoration: underline;
}

/* --- pola formularzy ----------------------------------------------------------------------- */

label { display: grid; gap: .3rem; font-size: .9rem; color: var(--ink-soft); }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  min-height: var(--touch); padding: .5rem .65rem;
  /* Natywna chroma (`2px inset`) byla jedynym „stylem" pol w panelu. */
  border: 1px solid var(--line); border-radius: .5rem;
  max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.1rem; height: 1.1rem; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input::placeholder { color: var(--ink-soft); opacity: .8; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }

/* --- komunikaty ---------------------------------------------------------------------------- */

.error, .warning, .ok, .note, .hint, .empty {
  border-radius: var(--radius);
}
.error {
  color: var(--danger); background: var(--danger-soft);
  border: 1px solid currentColor; padding: .7rem .9rem; font-weight: 600;
}
.warning {
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid currentColor; padding: .7rem .9rem; font-weight: 600;
}
.ok {
  color: var(--ok); background: var(--ok-soft);
  border: 1px solid currentColor; padding: .7rem .9rem; font-weight: 600;
}
.empty {
  color: var(--ink-soft); background: var(--paper-soft);
  border: 1px dashed var(--line); padding: 1.25rem; text-align: center;
}
.hint, .note { color: var(--ink-soft); }

/* --- stopka --------------------------------------------------------------------------------------
   Wspolna dla landingu i panelu (tam `main` ma wlasna szerokosc, stopka trzyma sie `wrap`). Siedzi
   tutaj, a nie w `landing.css`, bo panel tego arkusza nie laduje — a linki do regulaminu i polityki
   musza byc dostepne z kazdej strony aplikacji, nie tylko ze strony sprzedazowej. */

footer.site {
  border-top: 1px solid var(--line); margin-top: 3rem; padding: 2rem 1.25rem 3rem;
  color: var(--ink-soft); font-size: .875rem;
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
footer.site a { color: inherit; }
.footer-col { display: flex; flex-direction: column; gap: .4rem; }
.footer-company { text-align: right; align-items: flex-end; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Oznaczenie danych zastepczych nie jest przypisem — user ma je zobaczyc, zanim sie zarejestruje. */
.footer-flag { color: var(--warn); font-weight: 600; max-width: 44ch; }
@media (max-width: 40rem) {
  .footer-company { text-align: left; align-items: flex-start; }
}

/* Odpowiednik systemowego „Increase Contrast". */
@media (prefers-contrast: more) {
  :root { --ink-soft: var(--ink); --line: currentColor; }
  .btn, button:not(.link), input, select, textarea { border-width: 2px; }
}