/* ===================================================================== S24 — tokeny wizualne Jedno miejsce, z ktorego bierze sie KAZDY kolor, odstep i rozmiar. Zasada: komponent nigdy nie wpisuje wartosci wprost, tylko siega po zmienna. Dzieki temu motyw ciemny i kolor klienta (biala etykieta) to podmiana kilkunastu zmiennych, a nie przepisywanie arkuszy. ===================================================================== */ /* ===================================================================== KROJE PISMA (19.09.2026). Łukasz: „czcionka jest słaba strasznie". Do tej pory program brał krój systemowy — na Windowsie Segoe UI w cienkiej odmianie. Teraz własne kroje, leżące w programie (bez Google Fonts, bez zależności od sieci klienta): Inter — motyw jasny i ciemny: czytelny przy liczbach i tabelach, Nunito — motyw ANANAS (test, 19.09.2026). Oba są zmiennej grubości, więc podstawowy tekst stoi na 470–520 zamiast cienkiego 400. ===================================================================== */ @font-face{font-family:"Inter S24";font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Inter S24";font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* Onest — krój marki ANANAS (Łukasz, 27.09.2026: „zostawiamy czcionkę ONEST"). */ @font-face{font-family:"Onest S24";font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/onest-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Onest S24";font-style:normal;font-weight:100 900;font-display:swap; src:url(/fonts/onest-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Nunito S24";font-style:normal;font-weight:200 1000;font-display:swap; src:url(/fonts/nunito-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Nunito S24";font-style:normal;font-weight:200 1000;font-display:swap; src:url(/fonts/nunito-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root { /* --- kolor akcentu: to jest TO, co podmienia klient --- */ --accent-h: 222; --accent-s: 78%; --accent-l: 48%; --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%)); --accent-soft: hsl(var(--accent-h) var(--accent-s) 96%); --accent-border: hsl(var(--accent-h) calc(var(--accent-s) - 20%) 84%); --accent-ink: #fff; /* Akcent jako KOLOR TEKSTU (linki, aktywna pozycja menu). Osobny token od 19.09.2026: w motywie ANANAS akcent to żółć ananasa, a żółty napis na białym jest nieczytelny — tekst dostaje wtedy ciemny bursztyn. */ --accent-text: var(--accent); /* --- skala szarosci: lekko ciepla, zeby nie byla szpitalna --- */ /* Decyzja 02.09.2026: tlo strony wyraznie ciemniejsze od bialej karty, a linie o stopien mocniejsze. Wczesniejsza skala byla tak jasna, ze karta, tabela i tlo zlewaly sie w jedna plame. */ /* 20.09.2026 — CZYTELNOŚĆ JAK W CIEMNYM. Łukasz: „ciemny motyw na razie dla mnie the best, jeśli chodzi o czytelność". Ciepłe, beżowe szarości zlewały tło, linie i tekst pomocniczy w jeden ton. Teraz neutralne, lekko chłodne: białe karty na wyraźnie ciemniejszym tle, tekst prawie czarny, pomocniczy ciemniejszy niż był (kontrast policzony — patrz narzedzia/kontrast.mjs). */ --g0:#ffffff; --g1:#e9ecf1; --g2:#f2f4f7; --g3:#e2e6ec; --g4:#c9d0da; --g5:#98a2b1; --g6:#4f5968; --g7:#2f3743; --g8:#1c222b; --g9:#0d1117; --bg: var(--g1); --surface: var(--g0); --surface-2: var(--g2); --line: var(--g4); --line-soft: var(--g3); --ink: var(--g9); --ink-2: var(--g7); --ink-3: var(--g6); /* --- ROZBICIE PLASKIEGO JASNEGO TLA ------------------------------ Lukasz, 06.09.2026: „Kazdy wiersz jest tego samego koloru, nie mozna dac im jakiejs delikatnej przerwy? (...) Tyczy sie to calego interfejsu Serwis24 Suite jasnego". To NIE jest kosmetyka jednej tabeli. Na jasnym motywie karta, tabela i tlo strony mialy prawie ten sam ton - caly ekran byl jedna plaszczyzna, a oko przy dwudziestu wierszach gubilo kolumne. UWAGA na przyszlosc: te dwie zmienne byly przez chwile zadeklarowane w bloku [data-density="compact"]. Efekt: w normalnej gestosci var(--pas) nie mial wartosci, paskowanie po cichu nie robilo nic, a arkusz wygladal na poprawny. Jesli kiedys „pasy znikna" - to jest pierwsze miejsce, w ktore trzeba zajrzec. Trzy osobne tony, bo pelnia trzy rozne role i musza sie roznic: --pas co drugi wiersz - ma byc ledwo widoczny, --naglowek tlo naglowka tabeli - oddziela nazwy od danych, --surface-2 najechanie kursorem - MOCNIEJSZE od paska, inaczej podswietlenie ginie na pasiastych wierszach. */ --pas: #f7f8fa; --naglowek: #f2f4f7; /* WIERSZE TABEL — 19.09.2026, Łukasz: „wiersze w tabelach bardzo się zlewają, to bolączka jasnego motywu". Dwie rzeczy naraz: wyraźna linia między wierszami (o stopień mocniejsza niż --line-soft) i pasek co drugi wiersz ciemniejszy niż dotąd. Najechanie dostaje odcień akcentu — nie myli się z paskiem. */ --wiersz-linia: #dde2e9; --wiersz-hover: hsl(var(--accent-h) 70% 95%); /* Pionowa kreska między kolumnami (20.09.2026, Łukasz: „brakuje mi pionowych linii oddzielających komórki w wierszach”). O stopień lżejsza od poziomej — prowadzi oko w dół kolumny, nie tnie wiersza. */ --kolumna-linia: #e8ebf0; /* --- kolory znaczeniowe: niskie nasycenie tla, mocny tekst --- */ --ok:#0a6b3f; --ok-bg:#e6f4ec; --ok-border:#a9d9bf; --warn:#8a5200; --warn-bg:#fff2dc; --warn-border:#efc983; --bad:#b01e1a; --bad-bg:#fdebe9; --bad-border:#f1b8b3; --info:#15539e; --info-bg:#e7f0fb; --info-border:#b3cdef; /* =================================================================== SERIE NA WYKRESACH (20.09.2026) =================================================================== Osobne od `--accent` i od kolorow stanu, i to swiadomie. `--accent` w motywie ANANAS jest zolty — seria danych w tym kolorze bylaby nieczytelna na jasnym tle i mylila sie z przyciskiem akcji. Kolory stanu (ok/bad) sa ZAREZERWOWANE: zielony ma znaczyc „dobrze", a nie „druga seria". Kazda para przeszla walidacje: pasmo jasnosci, minimum nasycenia, rozroznialnosc przy daltonizmie (delta E >= 8 dla protanopii i deuteranopii) oraz kontrast >= 3:1 wzgledem tla wykresu. Przy tritanopii separacja jest nizsza, dlatego wykres MUSI miec legende i podpisy przy ostatnim punkcie — kolor nigdy nie jest jedynym nosnikiem tozsamosci serii. =================================================================== */ --seria-1:#15539e; /* pierwsza seria — np. „wplynelo" */ --seria-2:#0a6b3f; /* druga seria — np. „zamkniete" */ /* Przyciski, ktore MAJA kolor. Zielony = zacznij, czerwony = zatrzymaj. Osobne tokeny, bo --ok i --bad to kolory TEKSTU na jasnym tle i na wypelnionym przycisku nie maja kontrastu. */ --ok-solid:#12764a; --ok-solid-hover:#0e6039; --ok-solid-ink:#ffffff; --bad-solid:#c02a24; --bad-solid-hover:#a2211c; --bad-solid-ink:#ffffff; /* --- typografia --- */ --font: "Inter S24", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-waga: 470; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Skala podniesiona 02.09.2026. Powod jest prosty i policzalny: wiekszosc ludzi pracuje dzis na 24-27 calach, gdzie 14 px to okolo 3 mm wysokosci liter z odleglosci 70 cm. Czytelne minimum to 16 px. Poprzednia skala byla przepisana z ekranu laptopa i na monitorze kazala sie pochylac do szyby. Podniesione sa TAKZE wysokosci wierszy i kontrolek - sama czcionka w tej samej ramce dalaby tekst przyklejony do krawedzi. */ /* Poprawka tego samego dnia: skoki miedzy stopniami byly za duze. 34 px obok 12 px w jednym kaflu wyglada groteskowo - oko czyta to jako dwa rozne programy sklejone tasma. Teraz kazdy nastepny stopien jest o okolo 15% wiekszy od poprzedniego, wiec skala jest wyrazna, ale nic z niej nie wystaje. */ --fs-xs:13px; --fs-sm:14px; --fs-base:16px; --fs-md:18px; --fs-lg:20px; --fs-xl:23px; --fs-2xl:27px; --lh:1.55; /* --- odstepy: siatka 4 px --- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; /* --- gestosc: DOMYSLNIE CZYTELNA (decyzja 01.09.2026) --- */ --row-h:52px; /* wiersz tabeli (20.09.2026: 48 → 52, wzór z makiety) */ --control-h:42px; /* pole i przycisk */ --pad-card:20px; --pad-cell:14px 13px; --radius-sm:6px; --radius:9px; --radius-lg:14px; --radius-pill:6px; /* 28.09.2026: plakietki prostokątne, lekko zaokrąglone (było 999px) */ --shadow-1:0 1px 2px rgba(20,18,14,.07), 0 2px 6px rgba(20,18,14,.06); --shadow-2:0 4px 14px rgba(20,18,14,.10), 0 1px 3px rgba(20,18,14,.07); --shadow-3:0 22px 56px rgba(20,18,14,.22); --focus:0 0 0 3px hsl(var(--accent-h) var(--accent-s) 48% / .28); } /* tryb kompaktowy - wlaczany przez uzytkownika TAM, gdzie listy sa dlugie */ :root[data-density="compact"] { --row-h:38px; --control-h:36px; --pad-card:14px; --pad-cell:8px 10px; --fs-base:15px; --fs-sm:13px; --fs-md:16px; } /* motyw ciemny - podmieniamy WYLACZNIE zmienne */ :root[data-theme="dark"] { --g0:#17161a; --g1:#131215; --g2:#1e1d22; --g3:#26252b; --g4:#33323a; --g5:#4c4a54; --g6:#8b8894; --g7:#b3b0ba; --g8:#d8d5de; --g9:#f2f0f5; --bg:var(--g1); --surface:#1a191e; --surface-2:var(--g2); --pas:#211f27; --naglowek:#1f1e24; --wiersz-linia:#34323b; --wiersz-hover:hsl(var(--accent-h) 30% 20%); --kolumna-linia:#2d2c33; --line:var(--g4); --line-soft:var(--g3); --ink:var(--g9); --ink-2:var(--g7); --ink-3:var(--g6); --accent: hsl(var(--accent-h) calc(var(--accent-s) - 14%) 62%); --accent-hover: hsl(var(--accent-h) calc(var(--accent-s) - 14%) 68%); --accent-soft: hsl(var(--accent-h) 30% 18%); --accent-border: hsl(var(--accent-h) 30% 30%); --accent-ink:#0f0e12; --ok:#5fd39b; --ok-bg:#12271d; --ok-border:#1f4a35; --warn:#e8b661; --warn-bg:#2a2113; --warn-border:#4d3d1d; --bad:#f08b85; --bad-bg:#2b1616; --bad-border:#552726; --info:#7db4ee; --info-bg:#141f2c; --info-border:#264057; /* Ciemne pasmo jasnosci jest wezsze (L 0.48–0.67) — te dwa kolory sa dobrane pod nie, a nie rozjasnione z wersji jasnej. */ --seria-1:#4a8fd8; --seria-2:#2ba375; --ok-solid:#2f9d69; --ok-solid-hover:#39b077; --ok-solid-ink:#07140d; --bad-solid:#cb524c; --bad-solid-hover:#da6660; --bad-solid-ink:#1b0c0b; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45); --shadow-3:0 20px 48px rgba(0,0,0,.6); } /* ===================================================================== MOTYW ANANAS (19.09.2026) — barwy logo: granat obrysu, żółć ananasa, zieleń liści. Łukasz wybrał wariant „granat + żółć": ciemnogranatowe menu, jasne karty do pracy, żółć jako akcent. Akcent jest tu NA SZTYWNO (nie z --accent-h), bo to motyw marki — kolor firmy klienta obowiązuje w motywie jasnym i ciemnym. Żółć nie nadaje się na tekst ani na tło białego napisu, dlatego: przyciski żółte z GRANATOWYM napisem, a akcent tekstowy to ciemny bursztyn (kontrast ok. 6:1 na bieli). ===================================================================== */ :root[data-theme="ananas"] { /* Onest — krój marki od 27.09.2026 (wybrany z testu krojów; wcześniej Nunito). Tytuły i liczby tym samym krojem, bez liter z logo. */ --font: "Onest S24", "Inter S24", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-waga: 450; /* 20.09.2026 — obszar pracy NEUTRALNY, marka w akcentach. Krem pod wszystkim (tło, filtry, nagłówki, podświetlenie wiersza) sprawiał, że żółć przestała cokolwiek wyróżniać, a żółte i czerwone wiersze ginęły. Granat menu i żółte przyciski/kreski zostają. */ --g0:#ffffff; --g1:#f0efea; --g2:#f5f5f2; --g3:#e5e5df; --g4:#cfd0c9; --g5:#9ea3ad; --g6:#4a5670; --g7:#2a3651; --g8:#1c2740; --g9:#0d1930; --bg:var(--g1); --surface:var(--g0); --surface-2:var(--g2); --pas:#fafaf8; --naglowek:#f7f5ee; --wiersz-linia:#e2e2dc; --wiersz-hover:#f3f4f6; --kolumna-linia:#ebebe6; --line:var(--g4); --line-soft:var(--g3); --ink:var(--g9); --ink-2:var(--g7); --ink-3:var(--g6); --accent:#f5b301; --accent-hover:#e2a300; --accent-ink:#0d1f3c; --accent-soft:#fff3cc; --accent-border:#efd27a; /* Linki i aktywne napisy GRANATEM, nie bursztynem (20.09.2026): bursztynowy tekst na bieli ma kontrast ~6, ale czyta się jak „wyblakły" i gryzie się z żółtymi przyciskami obok. Granat = 11. */ --accent-text:#1d3f7a; --ok:#1f6a12; --ok-bg:#e8f4e0; --ok-border:#aed79a; --warn:#8a5200; --warn-bg:#fff2dc; --warn-border:#efc983; --bad:#b01e1a; --bad-bg:#fdebe9; --bad-border:#f1b8b3; --info:#1a4a8a; --info-bg:#e8eef8; --info-border:#b6c9e6; /* Granat motywu jest za ciemny na serię danych — rozjaśniony do pasma. */ --seria-1:#20569c; --seria-2:#1f6a12; --ok-solid:#3a962b; --ok-solid-hover:#2f7f22; --ok-solid-ink:#ffffff; --focus:0 0 0 3px rgba(245,179,1,.45); --shadow-1:0 1px 2px rgba(13,31,60,.08), 0 2px 6px rgba(13,31,60,.06); --shadow-2:0 4px 14px rgba(13,31,60,.12), 0 1px 3px rgba(13,31,60,.08); } /* Menu boczne w granacie obrysu logo. Zmienne podmieniamy TYLKO wewnątrz menu — wszystko, co w nim stoi, samo bierze jasne napisy. */ :root[data-theme="ananas"] .side { --ink:#f3f5f9; --ink-2:#cdd5e2; --ink-3:#8f9cb3; --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08); --surface:#18305a; --surface-2:#0d1f3c; --g5:#f5b301; --accent-soft:rgba(245,179,1,.16); --accent-text:#ffcc3d; --ananas-slowo:#ffffff; background:#0d1f3c; border-right-color:#0d1f3c; color:var(--ink); }