@import url("../vendor/app-kit/web/tokens.css");
/* Wspólne skale z kit/web/tokens.css (D-032); tu tylko sloty kolorów marki Curionaut (app-kit/brand/README.md:
   lawenda #AF9BE0, mięta #83D0BC, kafel #0B1420). Wersji jasnej marki jeszcze nie ma — <html data-theme="dark">. */
:root[data-theme="dark"] {
  --bg: #0B1420; --surface: #142133; --ink: #EEF0F6; --muted: #A3ACBD; --line: #24344A;
  --accent: #AF9BE0; --accent-ink: #0B1420; --ok: #83D0BC; --danger: #E8836F;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: var(--text-m); line-height: var(--leading); }
.home { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-5); text-align: center; }
.home h1 { margin: 0; font-family: var(--f-display); font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--accent); }
.home .lead { margin: 0; max-width: 32ch; color: var(--ink); }
.langs { display: flex; gap: var(--space-2); }
.langs button { min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--accent);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: background var(--dur) var(--ease); }
.langs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.home .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.button, button.primary, .form button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: 0 var(--space-5); border-radius: var(--radius-m); border: 1px solid var(--accent); background: transparent;
  color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.button.primary, button.primary { background: var(--accent); color: var(--accent-ink); }

.topbar { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.topbar a, .back, .source { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); }
.screen { max-width: 40rem; margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.screen h1 { margin: 0; font-family: var(--f-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
.screen h2 { margin: 0; font-size: var(--text-l); }
.card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-s); color: var(--muted); }
.form input, .form select, .form textarea { min-height: var(--tap); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.list li { display: flex; flex-direction: column; gap: var(--space-1); }
.muted { color: var(--muted); font-size: var(--text-s); }
.empty { color: var(--muted); margin: 0; }
.error { color: var(--danger); margin: 0; }
.note-body { white-space: pre-wrap; margin: 0; }
.review-card .question { font-size: var(--text-xl); margin: 0; }
.review-card .answer { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); }