/* =====================================================================
   base.css — tokeny (ciemny motyw), reset, typografia
   ===================================================================== */

:root {
  color-scheme: dark;

  /* Powierzchnie i tusz — ciemny, „premium” motyw */
  --plane: #050505;
  --surface: #0e0e0e;
  --surface-2: #161616;
  --surface-3: #1d1d1d;
  --ink: #f5f5f3;
  --ink-2: #a5a5a1;
  --muted: #74746f;
  --grid: #1e1e1e;
  --axis: #333331;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --card-bg: linear-gradient(180deg, #121212 0%, #0b0b0b 100%);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.8);

  /* Kolory wersji (paleta kategoryczna, kroki pod ciemne tło) */
  --e1: #8989f0;   /* A 180 */
  --e2: #ea736d;   /* A 200 */
  --e3: #86dc94;   /* A 200 d */

  /* Statusy — zarezerwowane, zawsze z ikoną i etykietą */
  --good: #40c16b;
  --warning: #e8b342;
  --serious: #e0784f;
  --critical: #d84b4b;
  --good-ink: #36cf57;

  /* Typografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Układ */
  --wrap: 1200px;
  --gutter: 16px;
  --radius: 18px;
  --radius-sm: 10px;
  --topbar-h: 64px;
  --eng-count: 3;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* Kolor serii wg atrybutu data-c */
[data-c="a180"]  { --c: var(--e1); }
[data-c="a200"]  { --c: var(--e2); }
[data-c="a200d"] { --c: var(--e3); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 64px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
strong { font-weight: 600; }
small { font-size: 0.8em; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.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;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--plane); padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 8px; }

.mono { font-family: var(--mono); font-size: 0.92em; }
.tnum { font-variant-numeric: tabular-nums; }