/*
  Tokeny designu ProstePosty.

  JEDNA PALETA, ta sama co strona sprzedażowa (apps/landing/style.css). Klient kupuje na
  kremowo-pomarańczowej stronie i musi trafić do panelu, który wygląda na ten sam produkt,
  a nie na cudzy szablon.

  Nazwy zmiennych zostają panelowe, bo używa ich kilkanaście plików; zmieniają się wartości.

  TRYB CIEMNY ZNIKNĄŁ 01.09.2026, świadomie. Strona go nie ma (zero wystąpień
  `prefers-color-scheme` w jej arkuszu), więc panel z własnym ciemnym motywem był drugą marką
  obok pierwszej. Razem z nim znikł przełącznik, zapis wyboru w przeglądarce i jego test.
  To jest odjęcie funkcji, nie przeoczenie.

  Trzy reguły ze strony, których NIE WOLNO tu złamać:

  1. POMARAŃCZ WYŁĄCZNIE JAKO TŁO. Na kremie daje kontrast 2,5 do 1, czyli nie przechodzi
     żadnego progu czytelności. Nigdy jako tekst, nigdy jako kreska.
  2. KRESKA DWA PIKSELE W GRAFICIE, zero zaokrągleń. Miękkie rogi ma na tej stronie wyłącznie
     to, w co się klika, i ma ich dokładnie 14 pikseli.
  3. ZERO MIĘKKICH CIENI. Jedyne dopuszczalne przesunięcie to twarda druga płaszczyzna
     w kolorze akcji, i występuje raz, na karcie wyróżnionej.
*/

:root {
  /* Powierzchnie. Papier i grafit, tak jak na stronie: krem niesie większość, biel karty. */
  --tlo: #fff7e8;
  --powierzchnia: #ffffff;
  --powierzchnia-cicha: #f3efe7;
  --obwodka: #242b31;

  /* Tekst. Dwa stopnie na papierze, oba zmierzone na stronie. */
  --tekst: #242b31;
  --tekst-cichy: #5d646a;
  /* Tekst NA pomarańczu jest grafitowy, nie biały: biel na pomarańczu też nie przechodzi. */
  --tekst-na-marce: #242b31;

  /* Marka. Pomarańcz wyłącznie jako tło, patrz reguła pierwsza. */
  --marka: #ff7a00;
  --marka-ciemna: #242b31;
  --marka-tlo: #f3efe7;

  /* Stany. Zieleń i czerwień ze strony, żółć wyprowadzona z tej samej rodziny. */
  --sukces: #2e7d5b;
  --sukces-tlo: #eaf3ee;
  --uwaga: #9a6700;
  --uwaga-tlo: #f7f0e2;
  --blad: #c24132;
  --blad-tlo: #f9ece9;
  --neutralny: #5d646a;
  --neutralny-tlo: #f3efe7;
  /* Obwódka skupienia: kobalt, trzy piksele, odsunięta o trzy. Dokładnie jak na stronie. */
  --skupienie: #3b82f6;

  /*
    Typografia. Archivo niesie osobowość, Public Sans niesie treść, tak jak na stronie.
    Pliki leżą w kontenerze (patrz `fonts.css`), a nie u Google: panel klienta nie ma prawa
    zależeć od cudzego serwera ani wysyłać tam swojego adresu przy każdym wejściu.
  */
  --font: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-naglowek: "Archivo", var(--font);
  --font-liczby: var(--font);

  /* Odstępy. Skala panelu zostaje, bo zgadza się ze skalą strony na wszystkich stopniach. */
  --o1: 4px;  --o2: 8px;  --o3: 12px; --o4: 16px; --o5: 24px; --o6: 32px; --o7: 48px;

  /*
    Promienie i kreska. Zero wszędzie POZA przyciskiem, patrz reguła druga.
    `--cien` zostaje jako nazwa, bo używa jej kilka plików, ale nie niesie już cienia:
    usunięcie nazwy znaczyłoby przejrzenie ich wszystkich przy tej samej okazji, co
    przemalowanie, a to dwie zmiany naraz w jednym miejscu.
  */
  --kreska: 2px;
  --r-karta: 0;
  --r-przycisk: 14px;
  --r-plakietka: 0;
  --cien: none;
  /* Jedyne przesunięcie w całym panelu. Twarda druga płaszczyzna, nie rozmycie. */
  --przesuniecie: 10px 10px 0 var(--marka);

  /* Minimalny cel dotykowy. Strona żąda 52 pikseli na przycisku, panel bierze tę samą liczbę. */
  --dotyk: 52px;
}