/* ===================================================================== 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. ===================================================================== */ :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; /* --- 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. */ --g0:#ffffff; --g1:#f1efeb; --g2:#e9e7e1; --g3:#dedbd3; --g4:#c7c3b9; --g5:#a5a096; --g6:#6f6b62; --g7:#4e4b45; --g8:#3a3833; --g9:#1f1e1b; --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: #f6f3ee; --naglowek: #eae6dd; /* --- kolory znaczeniowe: niskie nasycenie tla, mocny tekst --- */ --ok:#0f7a4a; --ok-bg:#e8f5ee; --ok-border:#b7e0c9; --warn:#96650a; --warn-bg:#fdf3e2; --warn-border:#f0d9a8; --bad:#b4231f; --bad-bg:#fdecea; --bad-border:#f5c2be; --info:#1b5fa8; --info-bg:#eaf2fb; --info-border:#bcd6f0; /* 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --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:48px; /* wiersz tabeli */ --control-h:42px; /* pole i przycisk */ --pad-card:20px; --pad-cell:13px 14px; --radius-sm:6px; --radius:9px; --radius-lg:14px; --radius-pill: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:#1e1d22; --naglowek:#211f26; --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; --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); }