/* ============================================================================ 00-tokens.css — JEDYNE źródło wartości w całej aplikacji ---------------------------------------------------------------------------- Zasada: żaden inny plik nie zawiera surowego koloru, rozmiaru ani odstępu. Chcesz zmienić wygląd aplikacji? Zmieniasz tutaj, nie w komponentach. ============================================================================ */ :root { /* --- SKALA ODSTĘPÓW (4px) — używać wyłącznie tych wartości --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* --- TYPOGRAFIA --- */ /* NAPRAWA 11.08.2026 — BRAKOWALO „DM Sans" NA POCZATKU STOSU. Zmierzone na zywej stronie: wszystkie 4 warianty DM Sans mialy status „unloaded", a CALA aplikacja renderowala sie w Segoe UI Variable Text. Przyczyna nie byla siec — link do Google Fonts odpowiada poprawnie. Przegladarka pobiera plik czcionki dopiero wtedy, gdy jakis renderowany tekst do niej pasuje; skoro w stosie nie bylo DM Sans, nic jej nie zadalo i pliki nigdy nie byly sciagane. To REGRESJA przepisania CSS, nie decyzja: produkcja (CLOUDE/public/styles.css:44) i v8 (redesign/00-foundation.css:72) maja DM Sans jako PIERWSZA. Poprzedni komentarz „Stos 1:1 z monolitem" byl nieprawdziwy. „Noto Sans" i Arial zostaja — na maszynach bez Segoe to one lapia tekst. */ /* KOREKTA TEGO SAMEGO DNIA — DM Sans ZDJĘTA Z INTERFEJSU. Powyższa naprawa była poprawna technicznie (czcionka faktycznie się nie ładowała) i błędna w skutkach. Po jej wprowadzeniu użytkownik natychmiast zgłosił, że „czcionki są niewyraźne, aż oczy bolą" — i miał rację. Zmierzone na jego maszynie: Windows, `devicePixelRatio: 1.25` (ekran skalowany do 125%), DM Sans wczytana jako czcionka ZMIENNA (oś wagi 100–1000), realnie renderowana (inna metryka niż Segoe: 128,83 px vs 131,61 px na tym samym napisie). Chrome na Windowsie NIE stosuje hintingu do instancji czcionek zmiennych. Przy 13 px na ekranie 125% daje to miękkie i poszarpane laski liter. Segoe UI Variable Text jest zhintowana ręcznie dokładnie pod ten scenariusz i dlatego wygląda ostro. Do dziś rana cała aplikacja renderowała się właśnie nią — bo DM Sans nie działała — i do tego stanu wracamy ŚWIADOMIE. `--font-marka` zostaje do użycia tam, gdzie krój ma znaczenie wizerunkowe (logo, duże nagłówki), a nie w tekście roboczym: przy 18 px i większych brak hintingu przestaje być widoczny. Deklaracje @font-face w 02-typografia.css zostają — plik jest lokalny, nic nie kosztuje. */ /* DM Sans PRZYWRÓCONA 11.08.2026 — to jest czcionka wybrana przez użytkownika i nie wolno jej podmieniać. Zdjąłem ją na chwilę, próbując naprawić ostrość, i było to błędne: zamiast rozwiązać problem, odebrałem krój i przy okazji zepsułem grubości. Segoe UI nie ma wagi 800, więc przeglądarka PODRABIAŁA pogrubienie (`font-synthesis`) — stąd numer projektu nagle wyglądał na grubszy, choć w CSS nic się nie zmieniło. Ostrość rozwiązujemy tam, gdzie leży przyczyna (wygładzanie i hinting), a nie przez zmianę kroju. */ --font: "Onest", "DM Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans", Arial, sans-serif; /* 14.09.2026 (właściciel: „0 mają przekreślenia, nie chcę tego — ma być normalne 0"): czcionki o stałej szerokości (Consolas, Cascadia Mono) mają przekreślone zero. Wstawki kodu w czacie i notkach prezentacji piszemy krojem interfejsu. */ --font-mono: var(--font); /* RM3 (v15 b14): krój TYTUŁÓW ze wzoru (--f-tytul) — tytuł strony w górnym pasku, logo, nagłówki paneli i okien, duże liczby. */ --font-tytul: "Bricolage Grotesque", "Onest", "DM Sans", "Segoe UI", system-ui, sans-serif; --ls-tytul: -.01em; /* Najdrobniejsze etykiety: wersaliki nad kwotą, inicjały w awatarze, podpis w nagłówku dnia. Były rozrzucone jako surowe 9px/10px. */ /* CZYTELNOŚĆ (tura 5 ergonomii, 26.09.2026): NAJMNIEJSZY TEKST W PROGRAMIE = 12 px. Testerzy zmierzyli na komputerze co trzeci napis 9–11 px (Materiały, Bloki, Dostawcy, podpisy filtrów 10 px, okno kosztów 9,5 px). Poprawka idzie tu, w skali — żaden widok nie nadpisuje rozmiaru u siebie: --t-xs i --t-2xs → 12 px (zwykły drobny tekst: podpisy pól, daty, jednostki, podpisy filtrów), --t-3xs → 11 px = JEDYNY wyjątek: etykiety pisane WERSALIKAMI (MATERIAŁ / TRANSPORT nad kwotą, „2 KONSTRUKCJE", „AUTO/MANUAL", „BOM") i inicjały w awatarach. Wielkie litery przy 11 px są tak wysokie jak małe przy 13 px, a kolor tych etykiet ma ≥ 4,5 : 1. Zwykłego tekstu (małymi literami) w tym stopniu NIE piszemy. --t-4xs → 8 px zostaje, ale TYLKO dla podpisów w rysunkach SVG pomocy (skalują się z rysunkiem, `.bh-cap`) — to nie jest tekst interfejsu. */ --t-4xs: 8px; --t-3xs: 12px; --t-2xs: 12px; --t-xs: 12px; --t-sm: 13px; /* Tekst kontrolek (przyciski, pozycje menu podręcznego). Monolit używa 12,5 px w 39 miejscach — to realny stopień w tej aplikacji, nie pomyłka. */ --t-control: 14px; --t-base: 14px; --t-md: 16px; --t-lg: 19px; --t-xl: 22px; /* RM3 (v15 b14): dwa górne stopnie skali wzoru (--t-7, --t-8) — nagłówek dnia, liczby KPI, duże kwoty. */ --t-2xl: 28px; --t-3xl: 36px; /* Dwa stopnie spoza rytmu skali — wprost z monolitu, nie do wymyślania: etykieta kafla pulpitu (11,5) i nazwa firmy w menu bocznym (16). */ --t-kafel: 12px; --t-logo: 16px; --lh-tight: 1.25; /* 1.32 — dokładnie jak `body` w monolicie. Wcześniejsze 1.45 podnosiło wysokość KAŻDEGO tekstu w aplikacji o ~1,7 px i rozpychało wiersze. */ --lh-base: 1.45; --w-regular: 400; --w-medium: 500; --w-bold: 600; /* Stopień między 600 a 800 — monolit go używa w etykietach i zakładkach. */ --w-strong: 700; /* Najcięższy zwykły stopień — monolit używa 800 w nagłówkach paneli i licznikach. Nie mieszać z --w-bold: to jest „mocniej niż pogrubienie". */ --w-heavy: 700; /* Tylko liczby KPI w kalkulatorze (monolit 9725) — nigdzie indziej. */ --w-black: 700; /* --- KOLORY: powierzchnie --- */ --bg: #f3f4f7; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #eef0f4; /* --- KOLORY: tekst --- */ --text: #141a26; /* Tura 5 (26.09.2026): #5d6878 → #5a6576. Nieaktywne przełączniki („Tydzień", „Zamknięte", zakładki etapów) leżą na szarym torze #e1e3e8 i miały 4,40 : 1; teraz 4,60 : 1 (na białym 5,90 : 1). */ --text-muted: #465063; /* NAPRAWA 11.08.2026 — było #97a0b1, czyli kontrast 2,63:1 na białym tle. Próg czytelności to 4,5:1, a tym kolorem malowane są NAJMNIEJSZE napisy w aplikacji (podpisy „Materiał/Transport/Montaż/Razem" 9 px, strzałki, liczniki) — najgorsze możliwe połączenie: najdrobniejszy tekst w najsłabszym kolorze. Zmierzone na żywej stronie w 63 miejscach. #667287 daje 4,86:1 na --surface i 4,53:1 na --surface-2. Hierarchia trzech poziomów tekstu zostaje, tylko niesie ją teraz ROZMIAR i GRUBOŚĆ (te napisy i tak są mniejsze, wersalikowe i grubsze), a nie kolor tak jasny, że nie da się go przeczytać. */ /* Tura 5 (26.09.2026): #667287 → #606c81. Na białym i --surface-2 przechodził, ale na tle strony (--bg) miał 4,29 : 1, a na --surface-3 4,25 : 1 („Brak podglądu" w oknie oferty, podpis harmonogramu konsultacji). Teraz 4,69 : 1 na --bg i 4,64 : 1 na --surface-3 — wciąż jaśniejszy od --text-muted. */ /* RM8 (v15 b14): wzór ma #667085 — na szarym polu szukania (--surface-3) dawał 4,36 : 1, na jasnym tle akcentu 4,29 : 1. O włos ciemniej (#626c81): 4,62 : 1 i 4,55 : 1, na białym 5,27 : 1. Na oko ten sam kolor. */ --text-faint: #626c81; --text-invert: #ffffff; /* Napis na JASNYM kolorowym tle, które jest jasne w obu motywach (błękit etapu Design, bursztyn ostrzeżenia) — np. licznik „1" na przycisku Moje zadania i przy „Zadania" w menu. Biały dawał tam 1,9 : 1 (na błękicie) i 2,5 : 1 (na bursztynie); ciemny daje ≥ 7 : 1. Tura 5, ergonomia. */ --napis-na-jasnym: #141a26; /* Obrys kółka z inicjałami — w jasnym motywie niewidoczny (koła działów odcinają się od białego same). */ --avatar-obrys: transparent; /* --- KOLORY: linie --- */ --line: #e2e5eb; --line-strong: #c9ced8; /* RM3: cieńsza kreska między wierszami listy (wzór --linia-2); --line zostaje ramką kart i paneli. */ --line-soft: #eceef2; /* POPR-n45: ramka POLA formularza — brzeg pola musi mieć ≥ 3:1 do tła (WCAG 1.4.11). --line-strong dawał 1,4:1 na białym. #7d879a: 3,7:1 na białym, 3,3:1 na --surface-2. Tylko pola (input, select, textarea, listy wyboru) — karty i kreski bez zmian. */ --pole-ramka: var(--line-strong); /* --- KOLORY: akcent i stany --- */ /* Tura 5 (26.09.2026): #3b6ef0 → #3a6cef — o włos ciemniej. Biały napis na niebieskim („Nowy projekt", „Zapisz", aktywne zakładki) miał 4,49 : 1, czyli tuż pod progiem 4,5; teraz 4,59 : 1. Na oko ten sam kolor. */ --accent: #2446c5; --accent-strong: #2446c5; --accent-soft: #e9eefc; /* RM3: główny przycisk pod kursorem (wzór --ak-2). --accent-strong = kolor NAPISU w akcencie (wzór pisze akcentem --ak). */ --accent-hover: #1b37a3; --ok: #12733f; --ok-soft: #e7f6ed; --warn: #e0922e; --warn-soft: #fff3e3; /* NAPRAWA 11.08.2026 — DOKOŃCZENIE SYSTEMU TOKENÓW. Akcent miał od zawsze wariant tekstowy (`--accent-strong`), bo sama barwa marki jest za jasna na napis. Dokładnie ten sam problem mają „gotowe" i „uwaga", tylko nikt im wariantu nie dorobił, więc kod pisał napisy kolorem przeznaczonym na kropki, ramki i wypełnienia: --warn na --warn-soft = 2,28:1 (ostrzeżenia były praktycznie nieczytelne) --warn na --surface = 2,52:1 --ok na --surface = 4,40:1 (tuż pod progiem) Po dorobieniu wariantów: --warn-strong 5,35:1 na --warn-soft i 5,92:1 na białym, --ok-strong 5,73:1 na --ok-soft i 6,34:1 na białym. ⚠️ ZASADA: --ok / --warn / --danger nadal malują TŁA, RAMKI, KROPKI i PASKI — barwa i znaczenie statusów zostają nietknięte (pamięć `statusy-kolory`). Wariantu `-strong` używa się WYŁĄCZNIE w `color:`. `--danger` wariantu nie potrzebuje: mierzy 5,43:1 na białym i 4,75:1 na `--danger-soft`, czyli sam przechodzi próg. */ --ok-strong: #12733f; --warn-strong: #a35200; --danger: #c0271c; --danger-soft: #fdeeec; /* RM3: ramka czerwonej karty „od czego zacząć” i pól z błędem (wzór --bl-ramka). */ --danger-ramka: #f4c2bc; /* PRZYCISKI — jeden system na telefonie i komputerze (decyzja właściciela 13.09.2026, wzorzec telefonu): akcja główna = pełny akcent z napisem --on-accent; każdy inny przycisk = szare wypełnienie --btn-2 bez ramki; czerwień (--danger-soft + --danger) tylko przy usuwaniu. */ --on-accent: #ffffff; --btn-2: #eef0f4; --btn-2-hover: #e2e5eb; /* Tło ekranu telefonu (#F2F4F8 ze wzorca) — białe grupy stoją na nim bez ramek. */ --tlo-telefonu: var(--bg); /* SKÓRKA OKNA — JEDNA na komputerze i telefonie (W1, 27.09.2026; wzorzec telefonu zatwierdzony 13.09): szare tło okna, na nim białe grupy bez ramek (promień 16), pola z promieniem 12 (tło i ramka pola — POPR3-pola niżej), kreska włosowa nad stopką, róg arkusza/okna 20. Wartości przeniesione 1:1 z bloku zmiennych telefonu (9-telefon/1-podstawa.css §1) — telefon czyta te same nazwy. Tryb ciemny: z tokenów wyżej. */ --okno-tlo: var(--tlo-telefonu); --grupa-r: var(--r-lg); --arkusz-r: var(--r-lg); --pole-r: var(--r-sm); /* POPR3-pola (28.09.2026) — JEDEN WYGLĄD POLA w całym programie (widoki, okna, kartoteki, telefon, tablet). Właściciel: „niektóre okna mają szare pole do wpisywania lub wyboru, a nie białe jak reszta — wygląda jak zablokowana edycja, a wcale nią nie jest”. Skórka okna W1 dawała polom szare wypełnienie bez ramki (wzorzec telefonu), więc pole do wpisania wyglądało tak samo jak pole zablokowane. Zasada od teraz: • pole EDYTOWALNE = --pole-tlo (białe w jasnym motywie, powierzchnia --surface w ciemnym) + ramka --pole-ramka; • pole ZABLOKOWANE = --pole-tlo-zablokowane (szare), ramka --pole-ramka-zablokowane, kursor not-allowed, a tam, gdzie program zna powód — dymek z powodem (title), np. „sprzedana — cena zamrożona”. Fokus bez zmian: ramka akcentu + poświata (03-kontrolki). Pomiar pilnuje zasady: tools/kontrola/badanie-pomiary.mjs, typ n. */ --pole-tlo: var(--surface); --pole-tlo-zablokowane: color-mix(in srgb, var(--text) 8%, var(--surface)); --pole-ramka-zablokowane: var(--line-strong); --pole-napis-zablokowane: var(--text-muted); --kreska-wlos: color-mix(in srgb, var(--text) 8%, transparent); /* POPR2-x03 (28.09.2026): KOLOR ZASŁONY za oknem (tło okna, pytania, szkicownika, pomocy kosztów, powiększonego zdjęcia). Reguły mieszają go z przezroczystością (55 %, 45 %, 82 %). W jasnym motywie = --text (granat, bez zmian), w ciemnym prawie czarny — wcześniej brały --text także po ciemku, a tam --text jest JASNY i strona za oknem jaśniała do #7a818a. */ --zaslona-kolor: var(--text); /* --- KOLORY: etapy projektu (jeden system dla kropek, pigułek, pasków) --- */ --etap-konsultacje: #64748b; --etap-design: #0284c7; --etap-plany: #2563eb; --etap-produkcja: #ea580c; --etap-montaz: #9333ea; /* D2-20 (27.09.2026, pytanie 20): Gwarancja była czerwona (#dc2626) jak błąd. Czerwień zostaje tylko dla błędu (--danger, też „po terminie” w Harmonogramie). Gwarancja = morski turkus: 5,47 : 1 na białym, 5,1 : 1 na --surface-2; w ciemnym motywie #2dd4bf = 9,3 : 1 na --surface. Inny odcień niż Certyfikacja (niebieskawy cyjan). */ --etap-gwarancja: #0f766e; --etap-certyfikacja: #0891b2; /* v15 b19 (ZK7): KATEGORIE KOSZTÓW w Kalkulatorze — kolory wzoru wyglądu (.k-okno: --kc-prod … --kc-dod). Osobne od etapów projektu: we wzorze Montaż jest zielony, Certyfikaty fioletowe (etapy mają tu inne barwy). Ciemny motyw niżej. */ --kc-prod: #a4650a; --kc-trans: #2d59b5; --kc-mont: #1f7a45; --kc-cert: #6b43b6; --kc-odp: #86571a; --kc-masz: #0e776b; --kc-dod: #5b6475; --galka: #ffffff; /* gałka przełącznika — biała w obu motywach (wzór .k-sw::after) */ /* Przełącznik (tak/nie) — JEDEN rozmiar w całym Kalkulatorze (DC16b, właściciel 05.10.2026: „dlaczego przełączniki… są takie wielkie”): tor 34×20, gałka 16, odstęp gałki od toru 2; przesunięcie gałki = szerokość − gałka − 2 × odstęp. */ --przel-szer: 34px; --przel-wys: 20px; --przel-galka: 16px; --przel-odstep: 2px; --przel-skok: calc(var(--przel-szer) - var(--przel-galka) - 2 * var(--przel-odstep)); /* --- KOLORY: strefy populacji (J3, 27.09.2026) — JEDNA paleta dla okręgów km i stref czasu dojazdu: mapa w oknie projektu, legenda, lista stref, PDF populacji i slajd „Rynek” obu szablonów prezentacji. Serwer czyta te wartości STĄD (src/server/populacja/paleta-stref.js), PDF przez getComputedStyle — nie powtarzaj ich nigdzie indziej. OKLCH o równej jasności (L 0,55): turkus → błękit → fiolet → koral, od najbliższej strefy do najdalszej. Mapa (kafle OpenStreetMap) jest jasna w obu motywach, więc paleta jest jedna: linia ≥ 4,2 : 1 do tła mapy (#f2efe9), ≥ 3,3 : 1 do lasu, ≥ 3,1 : 1 do ciemnego panelu slajdu; biały napis na kolorze strefy ≥ 4,8 : 1. Granica i punkt grafitowe (bez pomarańczu i zieleni, które myliły się ze strefami). Halo = jasna obwódka pod linią; napis = tekst podpisów na mapie. */ --strefa-1: #007f7f; --strefa-2: #3370c7; --strefa-3: #8854bb; --strefa-4: #c04d42; --strefa-granica: #334155; --strefa-punkt: #1f2937; --strefa-halo: #ffffff; --strefa-napis: #1f2937; /* --- STATUSY pracy --- */ /* NAPRAWA 11.08.2026 — #94a3b8 → #6b7a90 (ten sam chłodny szary, ciemniejszy). To JEDYNY ton statusu, który nie przechodził progu nawet po przyciemnieniu napisu domieszką w `.status-pill` (05-komponenty): pigułka „Oczekuje" mierzyła 3,72:1. Powód jest prosty — sam ton był tak jasny, że 70% jego barwy plus 30% koloru tekstu nadal wychodziło jasne. Po zmianie 5,20:1. Ton nadal maluje też kropkę etapu i pasek — wszędzie robi się o tyle samo ciemniejszy, więc „Oczekuje" pozostaje najbledszym ze statusów i czyta się jak stan bierny, tylko daje się przeczytać. */ --status-oczekuje: #6b7a90; --status-wtoku: #0284c7; --status-gotowy: #16a34a; /* --- GEOMETRIA --- */ --r-xs: 6px; /* wzór: pasek pozycji na Timeline (.zh-tb) — jedyny promień 6 px w projekcie wyglądu (ZK3) */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px; /* --- WYSOKOŚCI KONTROLEK (spójne w całej apce) --- */ --h-control: 36px; --h-control-sm: 30px; /* 27, nie 26 — zmierzone wobec monolitu */ --h-row: 40px; /* Kwadratowy przycisk-ikona w wierszu tabeli. UJEDNOLICENIE 11.08.2026 — było sztywne 30 px i to był TRZECI rozmiar kontrolki, który nie służył niczemu własnemu. Zmierzone na żywej stronie: · w wierszu projektu „Dodaj wersję oferty" (.button.mini) ma 27 px, a kosz obok (.icon-button) miał 30 — 3 px różnicy w jednym rzędzie; · w pasku górnym dzwonek i koperta miały 30, a „Pomoc/Dark/Język" 32. Aplikacja potrzebuje DWÓCH wysokości, nie trzech: --h-control (32) — kontrolka samodzielna: pasek górny, formularz, okno --h-control-sm (27) — kontrolka w wierszu tabeli, użyta już w 50 miejscach Przycisk-ikona w wierszu należy do tej drugiej grupy, więc bierze jej wartość. Token zostaje pod własną nazwą, bo nazywa ROLĘ (i pozwala cofnąć tę decyzję w jednej linijce), ale przestaje być osobnym rozmiarem. */ --h-ikona: var(--h-control-sm); /* Flaga kraju przy numerze kierunkowym. Proporcja 4:3 — taka jest siatka plików w public/flags, więc każda flaga trzyma ten sam prostokąt i kolumna numerów nie „skacze". Emoji tu nie użyjemy: Segoe UI Emoji nie ma glifów flag i Windows rysuje zamiast nich litery kodu kraju (zmierzone). */ --flaga-w: 20px; --flaga-h: 15px; /* Zakładki. Aplikacja miała ich CZTERY rodzaje o czterech wysokościach: `.tab` 38.4 · `.timeline-tab` 36 · `.dash-tab` 34.8 · `.cat-subtab` 33.2. Każdy zestaw zakładek wyglądał inaczej mimo tej samej roli. Jeden token trzyma je równo; sposób oznaczenia aktywnej (kreska albo pigułka) zostaje różny, bo to różne konteksty — nawigacja kontra przełącznik. */ --h-tab: 36px; /* --- CIENIE --- */ --cien-1: 0 1px 2px rgba(20, 26, 38, .06), 0 1px 1px rgba(20, 26, 38, .04); --cien-2: 0 12px 32px -12px rgba(20, 26, 38, .22), 0 2px 6px rgba(20, 26, 38, .06); --cien-3: 0 24px 60px rgba(20, 26, 38, .16); /* --- UKŁAD --- */ --sidebar-w: 232px; /* RM3: szyna samych ikon (wzór: 76 px od 1180 px w dół i po „Zwiń menu”) i dolny pasek telefonu (wzór: 78 px z zapasem na gest). */ --sidebar-w-waski: 76px; --tabbar-h: 64px; --t-pole-dotyk: 17.8px; /* pola formularza przy skali dotyku 0,9: 16 px ÷ 0,9 — iPhone przybliża pole, gdy tekst na ekranie < 16 px */ /* RM3: menu boczne (wzór --menu, --menu-tusz, --menu-on) i znak logo (czerwony kwadrat „G”). */ --menu-tlo: #ffffff; --menu-tekst: #465063; --menu-aktywna: #e9eefc; --logo-znak: #a10808; --logo-znak-napis: #ffffff; /* Tło pod LOGO KLIENTA (kartoteka Klienci): stałe w obu motywach — logo jest rysowane na białym albo na ciemnym tle. */ --logo-tlo-jasne: #ffffff; --logo-tlo-ciemne: #111827; --topbar-h: 60px; /* --- OKNO DESIGN I KONSTRUKCJA (12.08.2026) --- Jedno miejsce na wymiary, które wcześniej były wpisane liczbą w kilku arkuszach. `--bok-design` szło literałem 284px w DWÓCH miejscach (boczne menu Designu i okno konstrukcji) — zmiana jednego bez drugiego rozjeżdżała oba okna. */ --bok-design: 284px; /* boczne menu z konstrukcjami w oknie Design */ --dymek-w: 920px; /* dymek konstrukcji nad oknem Design */ --kolumna-formularza: 400px; /* kolumna z wymiarami i BOM (sufit) */ --kolumna-formularza-min: 300px; --miniatura-w: 190px; /* kafelek galerii renderów w pełnym oknie */ --miniatura-h: 148px; --miniatura-w-dymek: 150px; /* w dymku jest ciaśniej */ --miniatura-h-dymek: 116px; /* --- PROGI SZEROKOŚCI (K12, v14) — KANON: 600 / 820 / 980 / 1180 --- CSS nie przyjmuje var() w @media, więc liczby nie mieszkają w tokenach. Jedyna tabela progów to PROGI w js/00-przed-malowaniem.js. W arkuszach wolno użyć tylko (max-width: 600 | 980 | 1180px) i (min-width: 981 | 1181px albo 980.02 | 1180.02px). Telefon (≤ 820 px albo telefon obrócony poziomo) to NIE próg w arkuszu, tylko :root[data-ui="mobile"] — ustawia go JS. Treść zależna od szerokości swojego pojemnika: nazwane zapytania kontenerowe (menu, lista-projektow). Trzy wyjątki od kanonu — zostały, bo przestawienie zmieniłoby wygląd (sprawdzone przy 1279/1280/1860): · okno kosztów: 1280 px i 1859,98 px (11-kalkulator-wynik.css) — okno ma szerokość ekranu − 40 px, więc to progi SAMEGO okna: 4 → 3 kolumny i wąski edytor trasy; · tabela uprawnień: 1279 px (12-uzytkownicy.css) — kolumna nazw 200 px w wąskiej tabeli. */ /* --- WARSTWY (z-index) — JEDYNE miejsce, gdzie wolno ustalać kolejność --- Kolejność 1:1 z monolitem. Zasada: im wyżej na liście, tym bardziej „na wierzchu". Toast musi być NAD wszystkim (informuje o zapisie), blokada zapisu tuż pod nim, potwierdzenie nad oknami (bo wymaga decyzji). NIGDY nie wpisuj z-index liczbą w komponencie — użyj tokenu. */ /* Wyciete 11.08.2026 — martwe reguly, zero wystapien w public/js. Szczegoly: AUDYT-CSS-2026-08-11.md B9. */ --z-topbar: 20; --z-tabbar: 50; --z-szuflada: 60; --z-okno: 60; /* Warstwy LOKALNE — panele zakotwiczone w komponencie (`position: absolute`). Konkurują wyłącznie z rodzeństwem w swoim kontenerze, nie z oknami aplikacji, dlatego mają własne, niskie wartości i NIE wolno tu podstawiać `--z-okno` ani `--z-szuflada` — te znaczą co innego i skłamałyby o roli elementu. Wartości 1:1 z tym, co było wpisane liczbą; nazwy dostały 05.08.2026. */ --z-menu-lokalne: 30; /* menu w pasku górnym, popover w karcie */ --z-menu-nad-trescia: 60; /* menu, które musi przykryć zawartość swojej karty */ /* modal + jego przyciemnienie */ --z-dymek: 10000; /* emoji, popovery WEWNĄTRZ okien */ --z-potwierdzenie: 12000; /* appConfirm / appPrompt / appInfo */ --z-lista: 13000; /* rozwinięta lista comboboxa — musi być NAD oknem i nad potwierdzeniem, bo combo bywa w środku okna dialogowego */ --z-lightbox: 13500; /* 11.08.2026: bylo 13000 = tyle co --z-lista, wiec powiekszone zdjecie przykrywalo rozwinieta liste comboboxa */ /* powiększone zdjęcie */ --z-busy: 14000; /* blokada ekranu na czas zapisu */ --z-toast: 15000; /* komunikat — zawsze widoczny */ /* --- CZASY --- */ --szybko: .12s; --wolno: .24s; } /* --- DOTYK (tablet): te same nazwy, wymiary pod palec. Komponenty nic o nim nie wiedzą. --- Tura 5 (ergonomia): tablet w poziomie (1024×768) dostawał wymiary komputera — przyciski 27–32 px, w Materiałach 333 z 334 celów za małych dla palca. Na ekranie dotykowym (ten sam warunek co tryb „tablet" w responsive.js) kontrolki biorą wymiary telefonu (30-aplikacja-mobilna.css §1): samodzielna 44 px, w wierszu tabeli 40 px, zakładka 40 px. Komputer z myszą (pointer: fine) nie widzi tej reguły, telefon (data-ui="mobile") ma własne wartości w 30-aplikacja-mobilna.css §1 i zostaje bez zmian. */ :root[data-ui="tablet"] { --h-control: 44px; --h-control-sm: 44px; /* Zakładki i przełączniki segmentowe 44 px jak na telefonie (było 40 px — poniżej celu dotyku; tura 3 E1, 27.09). */ --h-tab: 44px; } /* --- TRYB CIEMNY: te same nazwy, inne wartości. Komponenty nic o nim nie wiedzą. --- */ :root[data-theme="dark"] { --bg: #0f131a; --surface: #171c25; --surface-2: #1b212b; --surface-3: #232a36; --text: #eef1f6; /* Tura 5 (26.09.2026): #8b949e → #949da7. Szary napis na zabarwionym tle (plakietka „prywatny", status „Aktywny" w Starych blokach, ilości na żółtym wierszu Zamówień) miał 4,1–4,4 : 1; teraz ≥ 4,59 : 1. */ --text-muted: #b4bccb; /* NAPRAWA 11.08.2026 — ten sam defekt co w motywie jasnym: #6e7681 dawał 3,77:1 na --surface i 3,31:1 na --surface-3. #848d99 daje 5,15:1 i 4,53:1. */ --text-faint: #8d97a8; /* Tura 5 (ergonomia): „napis odwrócony" stoi na kolorowych tłach — aktywna pozycja menu (--accent-strong), aktywne przełączniki (--accent), liczniki, pigułki statusu. W ciemnym motywie te tła są JASNE, więc biały napis dawał 1,95 : 1 (aktywne menu) i 2,5 : 1 (przełączniki: Konsultacje, Miesiąc, Mój, Osoby). Ciemny napis — ten sam co --on-accent na głównych przyciskach ciemnego motywu — daje 7–10 : 1. */ --text-invert: #0f131a; --napis-na-jasnym: #0f131a; /* Kółko z inicjałami ma kolor działu (to dana, nie token) — ciemnogranatowe koło na ciemnym pasku znikało, zostawały same litery „BK". Cienki jasny obrys pokazuje kształt (06-elementy.css, awatary). */ --avatar-obrys: color-mix(in srgb, var(--text) 45%, transparent); --line: #2a3140; --line-strong: #3a4354; --line-soft: #222834; --pole-ramka: var(--line-strong); /* POPR-n45: 4,1:1 na --bg, 3,8:1 na --surface (ciemny) */ --accent: #7d9bff; --accent-strong: #7d9bff; --accent-soft: #1e2a4d; --accent-hover: #a3b8ff; --ok: #5fd394; --ok-soft: #123024; --warn: #ffae57; --warn-soft: #3a2710; /* W trybie ciemnym napis musi być JAŚNIEJSZY od tła, więc warianty tekstowe idą w drugą stronę niż w trybie jasnym. Same `--ok` i `--warn` są tu już jasne i przechodzą próg, ale nazwy muszą istnieć w obu motywach — inaczej reguła używająca `--warn-strong` w ciemnym trybie nie miałaby wartości. */ --ok-strong: #5fd394; --warn-strong: #ffae57; --danger: #ff7a6e; --danger-soft: #3a1a18; --danger-ramka: #6b2a24; --menu-tlo: #131821; --menu-tekst: #b4bccb; --menu-aktywna: #1e2a4d; --on-accent: #0f131a; --btn-2: #232a36; --btn-2-hover: #2a3140; --tlo-telefonu: var(--bg); --zaslona-kolor: #010409; /* POPR2-x03: zasłona za oknem przyciemnia (czarny półprzezroczysty), a nie rozjaśnia */ --etap-konsultacje: #94a3b8; --etap-design: #38bdf8; --etap-plany: #6b9cff; --etap-produkcja: #fb923c; --etap-montaz: #c084fc; --etap-gwarancja: #2dd4bf; --etap-certyfikacja: #22d3ee; --kc-prod: #f0a53a; --kc-trans: #8aa9f6; --kc-mont: #5fcf8d; --kc-cert: #b89cf2; --kc-odp: #d9a86a; --kc-masz: #4fd0be; --kc-dod: #a3adbd; --status-oczekuje: #8b949e; --status-wtoku: #38bdf8; --status-gotowy: #4ade80; --cien-1: 0 1px 2px rgba(0, 0, 0, .4); --cien-2: 0 16px 40px -12px rgba(0, 0, 0, .6); --cien-3: 0 24px 60px rgba(0, 0, 0, .5); } /* ============================================================================ MOST NAZW — stare nazwy, których JESZCZE używa JavaScript ---------------------------------------------------------------------------- To NIE jest zapas „na wszelki wypadek". Każda pozycja niżej jest realnie wołana z kodu — sprawdzisz to komendą: node narzedzia-css/most-nazw.mjs (wypisze żywe i martwe). Skasowano już 28 pozycji, które nie były używane nigdzie: --radius, --sidebar, --shadow, --white, --brand, --panel-gap i inne. Żadnego z tych aliasów NIE używaj w nowym CSS — pisz od razu docelową nazwą. ============================================================================ */ :root { /* Etapy i statusy. JS SKLEJA te nazwy w locie: public/js/widoki/projekty-lista.js → `var(--tone-${klucz})` public/js/widoki/pulpit.js → `var(--tone-${klucz})` Dlatego muszą zostać wszystkie dziesięć, dopóki tamten kod się nie zmieni. Uwaga: JS używa nazw ANGIELSKICH, tokeny docelowe są polskie. */ --tone-consulting: var(--etap-konsultacje); --tone-design: var(--etap-design); --tone-plans: var(--etap-plany); --tone-production: var(--etap-produkcja); --tone-montaz: var(--etap-montaz); --tone-warranty: var(--etap-gwarancja); --tone-certification: var(--etap-certyfikacja); --tone-pending: var(--status-oczekuje); --tone-inprogress: var(--status-wtoku); --tone-done: var(--status-gotowy); /* Pojedyncze nazwy wstawiane przez JS w stylach INLINE — usunięcie ich wymaga edycji JS, nie CSS, więc zostają do osobnego zadania: --surface-muted → 10-events.js:1349 --muted → public/js/widoki/ --green → public/js/okna/, public/js/zadania/ --green-soft → public/js/zadania/ --reminder → public/js/widoki/, public/js/zadania/ */ --surface-muted: var(--surface-2); --muted: var(--text-muted); --green: var(--ok); --green-soft: var(--ok-soft); --reminder: var(--warn); } /* ============================================================================ PASKI PRZEWIJANIA — 13.08.2026, polecenie użytkownika: „te scrollbary to ma być globalne ustawienie, czyli token; popraw jak ma wyglądać w całym systemie, ma nie mieć tego białego tła". Do tej pory aplikacja NIE stylowała pasków w ogóle — wyglądały tak, jak daje je przeglądarka: kanciaste końce i biały tor. Tu są tokeny; sama reguła stoi w 01-reset.css, żeby obowiązywała wszędzie i tylko raz. ============================================================================ */ :root { --pasek-szerokosc: 10px; --pasek-wciecie: 3px; --pasek-kolor: #c6ccd6; --pasek-kolor-hover: #98a1b0; } :root[data-theme="dark"] { --pasek-kolor: #3a4354; --pasek-kolor-hover: #5b667c; }