/* theme.css — tokeny motywu Pająka. Ciemny: nocny jedwab (srebro i perła na
   granacie). Jasny: perłowy świt (grafitowe srebro na lawendowej bieli).
   Srebro (--acc) to akcent marki; złoto (--gold) tylko tam, gdzie znaczy zysk:
   wynik, rekord, odblokowanie (§1h). Jedna drabina promieni (10/14/18)
   i odstępów (6/10/16/24), jedno światło z góry: jasna krawędź u góry,
   własny cień u dołu, cień rzucony niżej. */
:root {
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", "Noto Serif", "DejaVu Serif", serif;
  --r-s: 10px; --r-m: 14px; --r-l: 18px;
  --sp-1: 6px; --sp-2: 10px; --sp-3: 16px; --sp-4: 24px;
  --t-fast: 140ms; --t-med: 220ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body[data-theme="dark"] {
  --bg: #070b1c;
  --veil: rgba(5, 8, 22, .6);
  --card: #0f1636;
  --card-2: #141d45;
  --card-3: #1a2654;
  --bar: rgba(9, 13, 34, .74);
  --edge: rgba(206, 218, 248, .18);
  --edge-strong: rgba(206, 218, 248, .42);
  --text: #eef1fb;
  --text-2: #b9c2dc;
  --text-3: #8c96b5;
  --acc: #c9d3ea;
  --acc-2: #f3f6ff;
  --acc-3: #8a96b8;
  --acc-ink: #10163a;
  --gold: #e6c36c;
  --gold-2: #f7e1a0;
  --gold-3: #a9832f;
  --gold-ink: #261a05;
  --red: #ff8e9e;
  --good: #7fd8b0;
  --glow: rgba(190, 210, 255, .35);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -2px 0 rgba(0, 0, 0, .30), 0 10px 26px rgba(0, 0, 0, .48);
  --lift-s: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -2px 0 rgba(0, 0, 0, .26), 0 4px 12px rgba(0, 0, 0, .36);
  --track: rgba(255, 255, 255, .12);
  color-scheme: dark;
}
body[data-theme="light"] {
  --bg: #e7eaf5;
  --veil: rgba(228, 232, 245, .64);
  --card: #fbfcff;
  --card-2: #f1f3fa;
  --card-3: #e6e9f4;
  --bar: rgba(250, 251, 255, .9);
  --edge: rgba(60, 72, 130, .18);
  --edge-strong: rgba(60, 72, 130, .38);
  --text: #141a36;
  --text-2: #434b6c;
  --text-3: #6a7292;
  --acc: #5b6aa0;
  --acc-2: #8b99c9;
  --acc-3: #3e4b7e;
  --acc-ink: #ffffff;
  --gold: #b88a2e;
  --gold-2: #dcb35e;
  --gold-3: #8a6420;
  --gold-ink: #fffaf0;
  --red: #c02447;
  --good: #1d9c61;
  --glow: rgba(91, 106, 160, .25);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(40, 50, 110, .10), 0 10px 24px rgba(30, 40, 90, .18);
  --lift-s: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(40, 50, 110, .10), 0 4px 10px rgba(30, 40, 90, .14);
  --track: rgba(30, 40, 90, .12);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; }
.ic { width: 22px; height: 22px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}