/* Omni (omni.contact) · tokeny marki · wersja 1.0 · 27.09.2026
   Zasady i uzasadnienia: KSIEGA_MARKI.md w tym folderze. Decyzje: omni/OMNI_SPEC.md (D11, D13, D15-D18).
   Kroje (SIL OFL, bez zastrzeżonych nazw): kroje/Fraunces.woff2 i kroje/Figtree.woff2, licencje obok. */

@font-face{font-family:'Fraunces';src:url('kroje/Fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Figtree';src:url('kroje/Figtree.woff2') format('woff2');font-weight:300 900;font-display:swap}

:root{
  /* Paleta. Biel na musztardzie i musztarda na bieli nigdy jako tekst (1,69:1). */
  --musztarda:#F0C21A;
  --sliwka:#57203D;
  --tusz:#3A1428;
  --papier:#FFFCF5;
  --papier-2:#F6EFE0;
  --zakreslacz:#F8DC6E;
  --szarosc:#7B5A6B;
  --noc:#1C0A14;
  --noc-2:#2B1422;
  --papier-noc:#F7EEDC;
  --bialy:#FFFFFF;

  /* Role w trybie jasnym */
  --tlo-strony:var(--papier);
  --tlo-dymka:var(--papier-2);
  --tekst:var(--tusz);
  --tekst-pomocniczy:var(--szarosc);
  --etykieta:var(--sliwka);
  --slowo-ustalone:var(--sliwka);    /* słowo „Ustalone.” (litery i kropka jednym kolorem): śliwka, nocą musztarda (księga, rozdział 6) */
  --linia:rgba(87,32,61,.16);
  --ramka-pola:rgba(87,32,61,.6);       /* ramka pola tekstowego (etap 3, D61): 3,8:1 na papierze i bieli, wymóg 3:1; --linia (1,35:1) zostaje dla kresek i ramek ozdobnych */
  --podswietlenie:rgba(87,32,61,.08);   /* najechanie, wybrany wiersz i drobne wypełnienia (etap 3, D54): jasna śliwka zamiast beżu; beż tylko w trzech rolach z księgi */
  --obrys:1.5px;
  --dol:var(--sliwka);              /* śliwkowy dół: zakładki, pole pisania, pas akcji */
  --dol-akcent:var(--musztarda);
  --nowe:var(--sliwka);             /* kropka „jest coś nowego” przy Rozmowy, Poczcie i Ty: mała, nieruchoma, bez liczby (D57); musztarda zostaje dla Twojej decyzji */

  /* Tło sprawy mówi, czyja to decyzja (D16). Kolor nigdy nie pracuje sam: zawsze z podpisem. */
  --sprawa-twoja:var(--musztarda);            /* „Twoja decyzja” */
  --sprawa-twoja-tekst:var(--tusz);
  --sprawa-za-kogos:var(--sliwka);            /* „Masz głos Kasi” */
  --sprawa-za-kogos-tekst:var(--papier-noc);
  --sprawa-za-kogos-obrys:var(--sliwka);
  --sprawa-za-ciebie:var(--noc);              /* „Ola zagłosowała za Ciebie” */
  --sprawa-za-ciebie-tekst:var(--papier-noc);
  --sprawa-info:var(--bialy);                 /* rozmowa i informacje */
  --sprawa-info-tekst:var(--tusz);
  --sprawa-wiersz:var(--papier-2);            /* wiersz stanu w karcie informacyjnej („Na teraz”) */

  /* Stos arkuszy pod kartą sprawy (tylko karty spraw, nigdy zwykłe wiadomości) */
  --arkusz-wypelnienie:var(--bialy);
  --arkusz-obrys:var(--sliwka);
  --arkusze:5px -5px 0 -1.5px var(--arkusz-wypelnienie),5px -5px 0 0 var(--arkusz-obrys),
            10px -10px 0 -1.5px var(--arkusz-wypelnienie),10px -10px 0 0 var(--arkusz-obrys);

  /* Kroje (D15: charakter „Ciepły”) */
  --kroj-tytul:'Fraunces',Georgia,serif;
  --kroj-tytul-osie:'SOFT' 100,'WONK' 0;
  --kroj-tekst:'Figtree',system-ui,sans-serif;

  /* Stopnie pisma na telefonie (ekran 375 pt). Liczby w Figtree z font-variant-numeric: tabular-nums. */
  --pismo-tytul:800 50px/1 var(--kroj-tytul);          /* rozstaw -.015em, pełne ekrany na śliwce, do 2 wierszy */
  --pismo-tytul-dlugi:800 44px/1 var(--kroj-tytul);    /* gdy tytuł nie mieści się w 2 wierszach, do 3 wierszy */
  --pismo-decyzja:800 42px/1.02 var(--kroj-tekst);     /* rozstaw -.02em, treść ustalenia */
  --pismo-naglowek:800 22px/1.05 var(--kroj-tekst);    /* nazwa rozmowy */
  --pismo-pytanie:800 20px/1.12 var(--kroj-tekst);     /* pytanie w karcie, rozstaw -.01em */
  --pismo-pytanie-gosc-min:26px;                        /* strona gościa (D18): pytanie dostaje największy rozmiar w tych granicach, */
  --pismo-pytanie-gosc-max:19cqi;                       /* przy którym cała strona mieści się na ekranie; górna granica to 19% szerokości karty */
                                                        /* (56 px na telefonie 390, ok. 90 px na komputerze); wysokość wiersza 1.06, rozstaw -.02em */
  --pismo-tekst:400 15px/1.45 var(--kroj-tekst);
  --pismo-dokument:400 16px/1.6 var(--kroj-tekst);      /* długi tekst do czytania: polityka prywatności, regulamin (D70); kolumna najwyżej --szer-dokument */
  --pismo-maly:400 12.5px/1.4 var(--kroj-tekst);
  --pismo-przycisk:700 13.5px/1 var(--kroj-tekst);
  --pismo-przycisk-duzy:700 16px/1 var(--kroj-tekst);  /* duży przycisk na pełnych ekranach (wejście, strona gościa) */
  --pismo-pole:400 17px/1.3 var(--kroj-tekst);          /* pole na pełnych ekranach: od 16 px w górę iPhone nie powiększa strony przy wpisywaniu */
  --pismo-etykieta:700 11px/1.25 var(--kroj-tekst);    /* wersaliki, rozstaw .16em */
  --pismo-wiersz:700 10.5px/1.35 var(--kroj-tekst);    /* wersaliki, rozstaw .1em */
  --rozstaw-etykieta:.16em;
  --rozstaw-wiersz:.1em;

  /* Odstępy i zaokrąglenia */
  --o-1:4px; --o-2:8px; --o-3:12px; --o-4:16px; --o-5:24px; --o-6:32px; --o-7:40px;
  --r-karta:16px;
  --r-przycisk:18px;        /* przycisk 36 px wysokości, pole dotyku 44 px */
  --przycisk-duzy:52px;     /* duży przycisk i pole na pełnych ekranach */
  --przycisk-akcja:44px;    /* przycisk działania na karcie, w oknie i w okienku „Zagłosowane.” (D76); odpowiedź na kartę (Za, Przeciw) ma --przycisk-duzy */
  --r-przycisk-duzy:26px;
  --r-pole:25px;
  --r-arkusz-dolny:26px;
  --wys-dolu:82px;          /* wysokość śliwkowego dołu (etap 3, D54): pole pisania i blok osoby w lewym dolnym rogu to jeden pas */
  --margines-ekranu:20px;
  --szer-dokument:580px;    /* kolumna dokumentu: ok. 74 znaki w wierszu przy 16 px */

  /* Fokus i ruch */
  --fokus:2px solid var(--sliwka);
  --fokus-na-sliwce:2px solid var(--musztarda);   /* obwódka zaznaczenia na śliwkowym i nocnym tle (D61); na jasnym tle zostaje --fokus */
  --fokus-odstep:2px;
  --ruch-ustalone:280ms;    /* arkusze składają się w kartę */
  --ruch-kropka:120ms;      /* potem wpada kropka, z lekkim odbiciem */
  --ruch-zwijanie:220ms;
  /* Strona powitalna omni.contact (D77, D78): skala płynna od telefonu 390 px do komputera 1440 px */
  --strona-margines:clamp(20px,4.444vw,64px);
  --strona-szer:1312px;                        /* szerokość treści na komputerze: 1440 - 2 x 64 */
  --strona-odstep:clamp(96px,10vw,144px);      /* odstęp między sekcjami */
  --pismo-strona-tytul:700 clamp(46px,6.667vw,96px)/.96 var(--kroj-tytul);    /* nagłówek pierwszego ekranu, rozstaw -.02em */
  --pismo-strona-sekcja:600 clamp(32px,3.889vw,56px)/1.04 var(--kroj-tytul);  /* nagłówek sekcji, rozstaw -.015em */
  --pismo-strona-wstep:400 clamp(17px,1.458vw,21px)/1.45 var(--kroj-tekst);   /* tekst pod nagłówkiem */
  --ruch-lot-kropki:620ms;                     /* jedna kropka skacze łukiem między fazami opowieści i kończy w logotypie (jak ruch logotypu, D65, D86) */
  --strona-okno:min(640px,calc(100svh - 80px));   /* okno komunikatora w opowieści na stronie (D85) */
  --strona-droga:260svh;                       /* droga przewijania przypiętej opowieści: trzy zmiany fazy i chwila na „Ustalone.” */
  /* Zwykły komunikator: atrapa cudzej aplikacji w opowieści na stronie powitalnej (D85). Celowo szara, bez marki i bez naszych krojów. */
  --obcy-tlo:#F2F2F4;
  --obcy-dymek:#FFFFFF;
  --obcy-tekst:#1D1D1F;
  --obcy-pomocniczy:#6E6E73;
  --obcy-linia:rgba(0,0,0,.09);
  --obcy-awatar:#AEAEB2;
  --obcy-kroj:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Tryb ciemny: tło strony to noc, więc trzecie tło sprawy odwraca się na papier. */
@media (prefers-color-scheme:dark){
  :root:not([data-motyw="jasny"]){
    --tlo-strony:var(--noc);
    --tlo-dymka:var(--noc-2);
    --tekst:var(--papier-noc);
    --tekst-pomocniczy:#C9B3BF;
    --etykieta:var(--tekst-pomocniczy);   /* D83: etykiety nocą jasnoszare, musztarda zostaje dla kropki i decyzji */
    --slowo-ustalone:var(--musztarda);
    --nowe:var(--papier-noc);
    --linia:rgba(247,238,220,.16);
    --ramka-pola:rgba(247,238,220,.42);    /* 3,7:1 na nocy */
    --podswietlenie:rgba(247,238,220,.08);
    --sprawa-za-kogos-obrys:var(--papier-noc);
    --sprawa-za-ciebie:var(--papier);
    --sprawa-za-ciebie-tekst:var(--tusz);
    --sprawa-info:var(--noc-2);
    --sprawa-info-tekst:var(--papier-noc);
    --sprawa-wiersz:var(--noc);
    --arkusz-wypelnienie:var(--noc);
    --arkusz-obrys:var(--papier-noc);
    --fokus:2px solid var(--musztarda);
    --obcy-tlo:#161618;
    --obcy-dymek:#2A2A2E;
    --obcy-tekst:#F2F2F4;
    --obcy-pomocniczy:#9A9AA0;
    --obcy-linia:rgba(255,255,255,.1);
    --obcy-awatar:#5A5A60;
  }
}
:root[data-motyw="ciemny"]{
  --tlo-strony:var(--noc);
  --tlo-dymka:var(--noc-2);
  --tekst:var(--papier-noc);
  --tekst-pomocniczy:#C9B3BF;
  --etykieta:var(--tekst-pomocniczy);
  --slowo-ustalone:var(--musztarda);
  --nowe:var(--papier-noc);
  --linia:rgba(247,238,220,.16);
  --ramka-pola:rgba(247,238,220,.42);
  --podswietlenie:rgba(247,238,220,.08);
  --sprawa-za-kogos-obrys:var(--papier-noc);
  --sprawa-za-ciebie:var(--papier);
  --sprawa-za-ciebie-tekst:var(--tusz);
  --sprawa-info:var(--noc-2);
  --sprawa-info-tekst:var(--papier-noc);
  --sprawa-wiersz:var(--noc);
  --arkusz-wypelnienie:var(--noc);
  --arkusz-obrys:var(--papier-noc);
  --fokus:2px solid var(--musztarda);
  --obcy-tlo:#161618;
  --obcy-dymek:#2A2A2E;
  --obcy-tekst:#F2F2F4;
  --obcy-pomocniczy:#9A9AA0;
  --obcy-linia:rgba(255,255,255,.1);
  --obcy-awatar:#5A5A60;
}

@media (prefers-reduced-motion:reduce){
  :root{--ruch-ustalone:0ms;--ruch-kropka:0ms;--ruch-zwijanie:0ms}
}