/* ==========================================================================
   Farmersi 2.0 — tokens.css
   Jedyne źródło prawdy dla palety, typografii, odstępów i cieni.
   Paleta wg docs/STYL.md + motyw "bazowy" z 1.0 (sepia, th=2).
   Zmiana wyglądu = zmiana zmiennej tutaj, nie w komponentach.
   ========================================================================== */

:root {
  /* --- Tła (sepia / krem) --------------------------------------------- */
  --tlo-krem: #f5ecd8;
  --tlo-sepia: #d9c8a9;
  --tlo-papier: #fbf6e9;
  --tlo-papier-ciemny: #efe4cb;
  --tlo-noc: #241a10;

  /* Czysta biel pod WYPOWIEDZI na beżowym tle sekcji (właściciel: „może cała
     sekcja beżowa, a wypowiedzi białe"). Osobny token, a nie `#fff` w środku
     reguły — żeby dało się zmienić odcień w jednym miejscu. */
  --tlo-wypowiedzi: #ffffff;

  /* --- Tekst ----------------------------------------------------------- */
  --tekst: #3a2a1a;
  --tekst-mutowany: #6b573f;
  --tekst-jasny: #f5ecd8;

  /* --- Akcenty --------------------------------------------------------- */
  --akcent: #8b5a2b;
  --akcent-czerwony: #a83232;
  --akcent-zloto: #c9a227;
  --akcent-zielony: #5c7a4a;

  /* --- Linie i obramowania --------------------------------------------- */
  --linia: #c9b48c;
  --linia-mocna: #8b6f45;
  --linia-slaba: #e0d3b6;

  /* --- Kolory uzupełniające z audytu wizualnego (19.10.2026) -----------
     Nazwy dla barw, które były wpisane na sztywno w kilku plikach. */
  --akcent-zloto-tekst: #6f5716; /* złoty TEKST na jasnym tle — kontrast AA (pkt 8) */
  --fokus-na-ciemnym: #ffd66b;   /* wskaźnik fokusu na drewnie: 4,6–6,9 : 1 (pkt 3) */

  /* --- Kolory wykresów -------------------------------------------------
     Właściciel (zrzuty): „kolory wykresów »przychody« i »majątek« (wzięte
     z 1.0) — za jaskrawe, nie pasują. Wprowadź nowe, mniej jaskrawe,
     w palecie projektu”.
     Paleta pochodzi z akcentów projektu (ziemia/brąz, czerwień, złoto,
     zieleń, stonowany błękit, purpura, oliwka, morski) — bez czystej
     magenty, żółci i cyjanu z 1.0. Kolory są rozróżnialne także dla
     daltonistów, bo NIE polegamy tylko na odcieniu: każda seria ma
     podpis w legendzie. */
  --wykres-1: #a83232; /* czerwień projektowa */
  --wykres-2: #5c7a4a; /* zieleń projektowa */
  --wykres-3: #c9a227; /* złoto projektowe */
  --wykres-4: #4f7d9c; /* stonowany błękit */
  --wykres-5: #8b6f45; /* brąz (linia mocna) */
  --wykres-6: #8a5a7a; /* stonowana purpura */
  --wykres-7: #6d7f3f; /* oliwka */
  --wykres-8: #3f7d77; /* stonowany morski */

  /* --- Kolory UCZESTNIKÓW gry (mapa wsi + wykres majątku) --------------
     Właściciel: „chciałbym, żeby były TE SAME kolory na mapie wsi co
     w wykresie majątku gracza — powiedzmy, że kolor złoty to kolor gracza
     — na obu wykresach taki sam. przeciwników zrób może w odcieniach
     między niebieskim a zielonym. ale te same kolory na obu.”

     Dlatego to OSOBNA grupa tokenów (nie `--wykres-*`): ten sam gracz ma
     ten sam kolor w obu miejscach, a „ja" zawsze złoty. Odcienie
     przeciwników idą od błękitu do zieleni, żeby dawały się odróżnić
     bez polegania na legendzie. */
  --gracz-ja: #c9a227; /* gracz (złoto projektowe) — zawsze ten sam */
  /* WŁAŚCICIEL (17.10.2026): „kolory przeciwników trochę bardziej
     zróżnicowane" — poprzednie odcienie (4f7d9c, 4a7f8c, 3f7d77) były zbyt
     blisko siebie i na wykresie zlewały się w jedną linię. Teraz każdy stoi
     w innym punkcie rodziny „błękit → zieleń", z wyraźnym krokiem jasności:
     jasny błękit → morski → ciemna zieleń → oliwka → szarozieleń. */
  --gracz-1: #3f86c4; /* jasny błękit */
  --gracz-2: #2f8f8f; /* morski */
  --gracz-3: #2c6b3f; /* ciemna zieleń */
  --gracz-4: #7d8f34; /* oliwka */
  --gracz-5: #5f7f96; /* szarozieleń (chłodny) */

  /* Nieużytki rządowe na mapie wsi.
     Właściciel (17.10.2026): „nieużytki rządowe — też warto dać jakiś kolor,
     może jasny brąz, teraz jest w kolorze tła”. Jasny brąz odcina je od
     pergaminowego tła mapy, a podpisy (ciemny tekst z białym obrysem)
     pozostają na nim czytelne. */
  --wioska-nieuzytek: #d9c39c;

  /* --- Cienie ---------------------------------------------------------- */
  --cien-1: 0 1px 2px rgba(58, 42, 26, 0.08);
  --cien-2: 0 2px 8px rgba(58, 42, 26, 0.12);
  --cien-3: 0 6px 20px rgba(58, 42, 26, 0.16);

  /* --- Typografia ------------------------------------------------------ */
  /* Nagłówki: „Bitter” — szeryfowa płyta o gazetowym, XIX-wiecznym
     charakterze, hostowana lokalnie (żadnych zapytań do Google Fonts).
     Deklaracje @font-face są w base.css.
     Właściciel: „czcionka w nagłówkach — przydałaby się jakaś mniej
     banalna. ważne, by miała polskie znaki." Bitter wchodzi więc na
     WSZYSTKIE nagłówki (h1–h4) — to on nadaje klimat gazety z 1832 roku.
     POLSKIE ZNAKI: KOMPLET, potwierdzony pomiarem w przeglądarce
     (`.narzedzia/sprawdz-czcionke-w-przegladarce.js`). Poprzednia czcionka
     (Rye) miała tylko część — brakowało ą ć ę ś ź ż i wielkich odpowiedników,
     więc przeglądarka rysowała je czcionką zapasową i litery wyglądały obco.
     Bitter ma prawdziwe pogrubienie, więc hierarchię budujemy wagą
     i rozmiarem.
     `--font-naglowek` został jako zapas dla elementów, które nie są
     nagłówkami (podpisy, etykiety), a chcą mieć charakter. */
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  /* AUDYT WIZUALNY (19.10.2026, pkt 1): `--font-naglowek` wskazywał na
     Bookman/Rockwell, których serwis NIE HOSTUJE. Efekt zależał od komputera:
     Windows z Office rysował Bookman, Mac Georgię, Android Times — więc
     przyciski i nagłówki kart stały obok h1–h3 w Bitter i wyglądały jak dwie
     różne gazety. Teraz jedno źródło: `--font-display`. Bitter 700 jest już
     preloadowany w <head>, a wszystkie te reguły mają wagę 700, więc
     NIE przybywa żadnych zapytań o fonty. */
  --font-naglowek: var(--font-display);
  /* Prawdziwa kursywa dla cytatów i motto w stopce. Bitter italic nie jest
     hostowany (mamy tylko 400/700), więc przeglądarka i tak pożyczałaby
     kursywę z fallbacku — lepiej nazwać to wprost i mieć kontrolę. */
  --font-kursywa: Georgia, 'Times New Roman', serif;
  --font-tresc: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  --font-liczby: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas,
    'Liberation Mono', monospace;

  --rozmiar-xs: 0.75rem;   /* 12px */
  --rozmiar-s: 0.8125rem;  /* 13px */
  --rozmiar-m: 0.9375rem;  /* 15px — bazowy na mobile */
  --rozmiar-l: 1.125rem;   /* 18px */
  --rozmiar-xl: 1.375rem;  /* 22px */
  --rozmiar-2xl: 1.75rem;  /* 28px */
  --rozmiar-3xl: 2.25rem;  /* 36px */

  --wysokosc-linii: 1.6;
  --wysokosc-linii-naglowek: 1.2;

  /* --- Odstępy (skala 4px) --------------------------------------------- */
  --odst-1: 0.25rem;
  --odst-2: 0.5rem;
  --odst-3: 0.75rem;
  --odst-4: 1rem;
  --odst-5: 1.5rem;
  --odst-6: 2rem;
  --odst-7: 3rem;

  /* --- Promienie i proporcje ------------------------------------------- */
  --promien-s: 4px;
  --promien-m: 8px;
  --promien-l: 14px;
  --promien-krag: 50%;

  /* --- Układ ------------------------------------------------------------ */
  --szerokosc-tresci: 68rem;   /* 1088px — desktop */
  --szerokosc-waska: 44rem;    /* 704px — tekst ciągły */
  /* Miara tekstu ciągłego (60–85 znaków w wierszu). Audyt wizualny pkt 5–6:
     akapity i listy opisowe trzymają się tej szerokości, żeby nie czytało się
     ich „jak przez cały ekran”. */
  --szerokosc-tekstu: var(--szerokosc-waska);

  /* --- Ruch ------------------------------------------------------------- */
  --czas-szybki: 120ms;
  --czas: 200ms;
  --czas-wolny: 300ms;   /* twardy limit wg STYL.md */
  --krzywa: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Szanujemy prefers-reduced-motion globalnie. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --czas-szybki: 1ms;
    --czas: 1ms;
    --czas-wolny: 1ms;
  }
}