/**
 * agentsclub V2 - design tokens
 *
 * Wyjęte słowo w słowo z v2-docs/{zasady-redesignu,kurs,zadania,
 * badanie-rynku-w-niszy}.html, a od issue #99 nadpisane paletą z makiety
 * nowej nawigacji (docs/nawigacja/makieta-v1.html, §0 i §10) - to ona jest
 * odtąd specyfikacją i to z nią sprawdza się wartość przed zmianą.
 *
 * Zmieniło się względem tamtych czterech makiet: `--bg` z #FEFEFE na czystą
 * biel i doszedł `--card` o tej samej wartości (jedno płótno), `--pill`
 * i ciemne `--bg`/`--panel` przesunięte o jeden stopień, oraz nowe
 * `--ph`, `--hair2`, `--acc-soft`, `--a1/a2/a3`, `--mask`, `--del`,
 * `--shadow` i `--num` - wszystkie były dotąd lokalnymi kopiami
 * w community.css, czyli niewidocznymi dla reszty aplikacji.
 *
 * Loaded by every V2 page (see views/layout/head-v2.php) BEFORE base.css,
 * layout.css and any page-specific v2 stylesheet.
 */

:root{
  /* Jedno białe płótno (issue #99 §0): `--bg` i `--card` to ten SAM kolor,
     a elementy rozdziela włos, nie zmiana tła. Karta w innym odcieniu niż
     tło pod nią jest tym, co ta zmiana zdejmuje - nie przywracaj różnicy
     „dla czytelności", bo czytelność robi tu `--hair`. */
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --panel:#F8F7F5;
  --pill:#F1F0EC;
  --ink:#1A1A1A;
  --sub:#696760;
  /* Miejsce na zdjęcie i miniaturę: praktycznie biel. Duży beżowy prostokąt
     czyta się jak szare tło i to był błąd poprzedniej wersji makiety. */
  --ph:#FBFAF8;
  --hair:rgba(26,26,23,.09);
  --hair2:rgba(26,26,23,.055);
  --btn-bg:#1A1A1A;
  --btn-fg:#FFFFFF;
  --acc:#DB511D;
  --acc-soft:rgba(219,81,29,.12);
  /* Trzy stopnie siatki aktywności (§5). Pełnego pomarańczu tam nie ma:
     siatka ma być tłem, nie wykresem przejmującym uwagę całej kolumny. */
  --a1:rgba(219,81,29,.10);
  --a2:rgba(219,81,29,.22);
  --a3:rgba(219,81,29,.38);
  --mask:rgba(26,26,23,.36);
  --del:#B3261E;
  --shadow:0 16px 40px rgba(26,26,23,.14);
  --win-sh:rgba(26,26,23,.07);
  --fill:color-mix(in srgb,var(--acc) 15%,transparent);
  --ink-80:color-mix(in srgb,var(--ink) 82%,transparent);
  /* DWA kroje o stałej szerokości i to nie jest niekonsekwencja.

     `--mono` jest krojem KODU: bloki w playerze (`white-space:pre`),
     gotowce przy krokach zadania, `<code>` w „Co nowego" i w lekcji.
     Zostaje stackiem systemowym, bo kod czyta się znak po znaku.

     `--num` jest krojem LICZB: liczniki przy pozycjach paska, pozycja
     w rankingu, godzina przy wiadomości, podpisy pod liczbami. Tu treścią
     nie jest napis (CLAUDE.md), więc krój może być ozdobny - i taki jest
     Bitcount Grid Single, wskazany wprost w §10 spec.

     Nie sklejaj ich z powrotem w jeden token: Bitcount w bloku kodu jest
     nie do przeczytania, a systemowy monospace przy liczniku nie odróżnia
     się od reszty paska. */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --num:"Bitcount Grid Single",ui-monospace,monospace;

  /* Right/wrong, from widok-kursu.html. Deliberately NOT the accent: --acc
     means "you are here" (current lesson, selected option), so reusing it to
     mean "correct" is exactly what made a graded answer unreadable before. */
  --ok:#16794C;
  --zle:#B93A2C;

  /* size ramp: 12 / 14 / 16 / 18 / 20 / 28–32px (zasady-redesignu.html §02) */
  --fs-h:clamp(28px,3.6vw,32px);
  --fs-body:16px;
  --fs-small:14px;
}

html[data-theme="dark"]{
  --bg:#161615;
  --card:#161615;
  --panel:#1E1E1D;
  --pill:#242423;
  --ink:#EDECE8;
  --sub:#9A988F;
  --ph:#1C1C1B;
  --hair:rgba(237,236,232,.10);
  --hair2:rgba(237,236,232,.06);
  --btn-bg:#FFFFFF;
  --btn-fg:#141413;
  --acc:#F26430;
  --acc-soft:rgba(242,100,48,.16);
  --a1:rgba(242,100,48,.14);
  --a2:rgba(242,100,48,.30);
  --a3:rgba(242,100,48,.48);
  --mask:rgba(0,0,0,.55);
  --del:#F2857A;
  --shadow:0 16px 40px rgba(0,0,0,.45);
  --win-sh:rgba(0,0,0,.4);
  --fill:color-mix(in srgb,var(--acc) 24%,transparent);
  --ok:#4FC98C;
  --zle:#F08A7E;
}

/* zasady-redesignu.html §03: static end-state for every V2 page. Page-
   specific stylesheets add their own overrides for scenes/idle motion that
   need to freeze into a *meaningful* end state, not just stop moving. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}