/* ════════════════════════════════════════════════════════════════════════════ WARSTWA TOKENOW VOLTIA 3.0 - JEDEN PLIK DLA CALEGO PRODUKTU. Wydzielona 10 sierpnia 2026 przy etapie B5. Powod jest w koncepcie nazwany wprost (znalezisko F07): "cztery rozne systemy projektowe w jednym produkcie (klient, konsola, panel administracyjny, rejestracja)". Zmierzone tego dnia: konsola operatora miala 835 kolorow wpisanych na sztywno, 75 roznych wartosci i ZERO odwolan do palety. Kopiowanie tokenow do drugiego pliku tylko odroczyloby rozjazd - dlatego stoja tu raz, a oba dokumenty je dolaczaja. Warunek wyjscia etapu B5: "konsola i aplikacja kliencka wygladaja jak jeden produkt". Jeden plik tokenow jest warunkiem koniecznym tego zdania. ════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ SYSTEM PROJEKTOWY VOLTIA 3.0 - rozdzial 19 konceptu. JEDNO miejsce, w ktorym kolor wchodzi do interfejsu. Nauka z analizy Hoymiles zapisana w koncepcie wprost: brak jawnych tokenow serii sprawil, ze "siec" miala tam TRZY rozne kolory na jednym ekranie. Voltia miala ten sam problem - paleta byla omijana setkami wartosci wpisanych na sztywno w kodzie ekranow. ROZSTRZYGNIECIE KOLORU AKCENTU (koncept 19, "DECYZJA CZLOWIEKA"): Przewodnik Funkcjonalny opisywal akcent jako bursztynowy, ale bursztyn NIE WYSTEPUJE w logotypie Voltia - marka stoi na granacie i zieleni przechodzacej w turkus. Koncept rekomenduje zielen, a Szablon UI juz ja stosuje (--acc:#2AD18E). Idziemy za obydwoma dokumentami: akcent = zielen marki, bursztyn = WYLACZNIE semantyka fotowoltaiki. Powrot to zmiana jednej linii (--akcent). ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ KROJE PISMA - jedno miejsce, tak jak kolory. 14.08.2026: w `app.jsx` stalo 119 deklaracji `fontFamily:"'JetBrains Mono'"` BEZ KROJU ZAPASOWEGO. To nie jest drobiazg typograficzny: gdy krój nie dojdzie (a szedl z obcego serwera, wiec potrafil nie dojsc), CSS nie schodzi na monospace - schodzi na DOMYSLNY krój przegladarki, czyli zwykle szeryfowy o zmiennej szerokosci znaku. Kolumna liczb rozjezdza sie wtedy w pionie i wyglada na zepsuta. `--liczby` konczy sie na `monospace`, wiec nawet bez zadnego pobranego pliku cyfry zostaja rownej szerokosci. `tabular-nums` pilnuje, zeby „1" zajmowala tyle samo miejsca co „8" - inaczej licznik na zywo drga przy kazdej zmianie wartosci. ════════════════════════════════════════════════════════════════════ */ :root { --liczby: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace; --naglowki: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --tresc: 'Roboto', 'Segoe UI', system-ui, sans-serif; } :root, [data-theme="dark"] { /* -- baza, motyw ciemny -------------------------------------- */ --tlo: #0F1720; /* tlo aplikacji */ --powierzchnia: #1B2836; /* karta */ --powierzchnia2: #213142; /* karta 2. poziomu, naglowek tabeli */ --obrys: #2C3E52; /* linia, obramowanie */ /* --tekst3 to #8B9FB3, a nie #6D8298 z rozdzialu 19. Zmierzone: #6D8298 na karcie (#1B2836) daje kontrast 3,77:1, a na karcie drugiego poziomu 3,35:1 - ponizej progu 4,5:1, ktorego wymaga WCAG 2.1 AA dla zwyklego tekstu. A to jest NAJCZESCIEJ uzywany kolor tekstu w aplikacji (podpisy kafelkow, etykiety, jednostki). Sam koncept stawia WCAG 2.1 AA jako wymog, wiec jego wlasna rampa ustepuje jego wlasnemu kryterium. 12.08.2026: #8B9FB3 dawal 5,49:1 i 4,87:1 - AA, ale bez zapasu na powierzchni 2. poziomu. #8CA0B3 daje 5,55:1 i 4,92:1. */ --tekst1: #E8EFF5; --tekst2: #9FB3C6; --tekst3: #8CA0B3; --tekst4: #63788D; --akcent: #2AD18E; /* akcent glowny, marka */ --akcent2: #16C0A6; /* akcent wtorny, gradient */ /* -- paleta semantyczna, obowiazuje WSZEDZIE ------------------ */ --pv: #F5A623; /* fotowoltaika, produkcja */ /* BURSZTYN DO GRAFIKI (17.08.2026). `--pv` jest dobrany pod kontrast TEKSTU (4,5:1), przez co w motywie jasnym schodzi do #A05F00 - ciemnego brazu, ktory na wykresie wyglada blotnisto. Linia i wypelnienie to nie tekst: WCAG wymaga od grafiki 3:1, wiec moga byc jasniejsze i czystsze. Mierzone na bieli: #CC5500 = 4,31:1, wiec z zapasem. */ --pv-grafika: #F5A623; --magazyn: #2AD18E; /* magazyn, ladowanie, zysk */ --dom: #4A9EFF; /* dom, obciazenie */ --siec: #8FA3B5; /* siec, pobor */ --cena: #A78BFA; /* cena energii */ /* #FF5C5C dawal 4,38:1 na --powierzchnia2 (naglowki tabel, karty zagniezdzone) - ponizej AA. Rozjasnione o tyle, zeby przejsc: 4,61:1. */ --alarm: #FF6565; /* alarm, prog, strata */ /* -- tokeny serii danych: NAZWY WIAZACE (koncept 19) ---------- Obowiazuja jednoczesnie na wykresie, w legendzie, na ikonie kafelka, na diagramie przeplywu i na slupku bilansu. ZYSK NIGDY NIE JEST CZERWONY. */ --voltia-series-pv: #F5A623; --voltia-series-grid-import: #8FA3B5; --voltia-series-grid-export: #16C0A6; --voltia-series-battery-charge: #2AD18E; --voltia-series-battery-discharge: #7BE0B4; --voltia-series-load: #4A9EFF; --voltia-series-soc: #BFD9EE; --voltia-series-price: #A78BFA; --voltia-series-savings: #2AD18E; /* -- fazy licznika: techniczna trojka, nie wielkosc semantyczna. L2 przeniesione z zieleni na turkus - zielen znaczy "magazyn, zysk" i na wspolnym wykresie faza L2 udawala oszczednosc. */ --faza-l1: #4A9EFF; --faza-l2: #16C0A6; --faza-l3: #EC4899; /* Stopien posredni miedzy "wszystko gra" a alarmem. Koncept wymienia tylko alarm (czerwony), ale ostrzezenie to inna waga sprawy niz awaria. Bursztyn jest tu wolny, bo w profilu M nie ma fotowoltaiki - PRZY WLACZANIU PROFILU PVM trzeba to rozstrzygnac na nowo. */ --uwaga: #F5A623; --akcent-dim: #2AD18E33; /* Pasek ostrzezenia: tlo i obrys. Do B6 kazde takie miejsce mialo wpisane wlasne `rgba(245,158,11,0.10)` - ta sama wartosc w kilkunastu kopiach, ktore przy zmianie bursztynu rozjechalyby sie po kolei. */ --tlo-uwaga: #F5A6231A; --obrys-uwaga: #F5A62373; /* -- nazwy zastane: jeden alias zamiast 700 podmian w ekranach. Wartosci sa juz NOWE, wiec caly interfejs zmienia sie naraz. */ --navy: var(--powierzchnia2); --navy-dark: var(--tlo); --navy-grad: var(--powierzchnia2); --amber: var(--pv); --amber-dim: #F5A62333; --amber-light: #FFC65C; --white: var(--tekst1); --gray: var(--tekst3); --gray-light: var(--tekst2); --gray-dark: var(--tekst4); --card: var(--powierzchnia); --card-border: var(--obrys); --green: var(--magazyn); --red: var(--alarm); --blue: var(--dom); --purple: var(--cena); --text-primary: var(--tekst1); --text-secondary: var(--tekst2); --chart-grid: var(--obrys); --chart-text: var(--tekst3); --s-soc: var(--voltia-series-soc); --login-bg: linear-gradient(135deg,#0B1219 0%,#0F1720 50%,#1B2836 100%); } /* Motyw jasny - rampa wzorowana na Hoymiles (koncept 19). Docelowo JEDEN system z dwoma motywami: ciemny domyslny w aplikacji klienta, jasny domyslny w konsoli operatora. */ [data-theme="light"] { --tlo: #FAFBFC; --powierzchnia: #FFFFFF; --powierzchnia2: #F1F4F7; --obrys: #D8DDE4; /* Ta sama poprawka, co w motywie ciemnym: #7F94A9 z rozdzialu 19 daje na bieli 3,13:1, a na powierzchni drugiego poziomu 2,83:1. Rampa jasna z konceptu jest wprost przepisana z Hoymilesa, wiec przynosi ze soba jego niedorobke. 12.08.2026: poprzednia poprawka zatrzymala sie na #5D7386, czyli 4,93:1 na bieli, ale 4,46:1 na #F1F4F7 - PONIZEJ progu AA. Komentarz podawal te 4,46 wprost i tak zostalo wdrozone. A na tej wlasnie powierzchni siedza naglowki tabel, elementy w dzienniku zdarzen i komunikaty "Ladowanie...". #5B7083 daje 5,13:1 i 4,65:1. */ --tekst1: #202E38; --tekst2: #455564; --tekst3: #5B7083; --tekst4: #97A6B3; /* KOMENTARZ, KTORY BYL TU WCZESNIEJ, MOWIL NIEPRAWDE: "zielen przyciemniona - kontrast 4,5:1 na bieli". Zmierzone 12.08.2026 w przegladarce, na renderowanej konsoli: #0FA36B na bieli 3,24:1, na powierzchni 2. poziomu 2,94:1 #0E9C88 3,43:1 3,10:1 #B26A00 4,24:1 3,84:1 #1F6FD0 4,95:1 4,48:1 Trzy z czterech nie spelnialy AA nawet na bieli, a zaden nie spelnial go na #F1F4F7 - a wlasnie tam siedzi tekst w tabelach i elementach . Deklaracja w komentarzu nie jest pomiarem. Przyciemnione o tyle, zeby wejsc na 4,6:1 na OBU powierzchniach, z zachowaniem odcienia. Dotyczy WYLACZNIE motywu jasnego; motyw ciemny mial te wartosci policzone poprawnie i zostaje bez zmian. Serie wykresow ponizej maja wlasny, lagodniejszy prog 3:1 (WCAG dla elementow graficznych), wiec ich to nie dotyczy. */ --akcent: #0C7E52; /* bylo #0FA36B - 3,24:1, teraz 5,09:1 na bieli */ --akcent2: #0B7C6C; /* bylo #0E9C88 - 3,43:1, teraz 5,10:1 */ --pv: #A05F00; /* bylo #B26A00 - 3,84:1 na #F1F4F7, teraz 4,60:1 */ --pv-grafika: #CC5500; /* palona pomarancz, 4,31:1 na bieli - patrz motyw ciemny */ --magazyn: #0C7E52; --dom: #1E6DCC; /* bylo #1F6FD0 - 4,48:1 na #F1F4F7, teraz 4,62:1 */ --siec: #5C7286; --cena: #6D4AC4; --alarm: #C62F2F; /* Serie na jasnym tle: te same wielkosci, przyciemnione tak, zeby spelnialy kontrast 3:1 dla elementow graficznych (WCAG 2.1 AA). */ --voltia-series-pv: #B26A00; --voltia-series-grid-import: #5C7286; /* Zielenie serii mialy na --powierzchnia2 2,90-2,94:1, czyli ponizej progu 3:1 dla elementow graficznych. Przyciemnione w obrebie WLASNEJ rodziny odcieni - ladowanie zostaje zielone (152 st), rozladowanie turkusowe (170 st), wiec dalej rozroznia je odcien, a nie sama jasnosc. Zysk nadal nie jest czerwony. */ --voltia-series-grid-export: #0F9982; --voltia-series-battery-charge: #0F9C5A; /* #34B98A dawal na bieli 2,48:1 - ponizej progu 3:1, ktory WCAG stawia ELEMENTOM GRAFICZNYM. Byl wiec wadliwy takze jako kreska na wykresie, nie tylko jako (blednie uzyty) kolor tekstu. #2EA279 daje 3,20:1. */ --voltia-series-battery-discharge: #0F9982; --voltia-series-load: #1F6FD0; --voltia-series-soc: #5B7C99; --voltia-series-price: #6D4AC4; --voltia-series-savings: #0F9C5A; /* --akcent-dim NIE BYL nadpisany w motywie jasnym, wiec bral wartosc z motywu ciemnego (20% jasnej zieleni). Pozycja aktywna w menu miala na nim 4,40:1, przy 8% - 4,38:1, przy 5% - 4,47:1. Przy progu 4,5 kazde kolejne rozjasnienie tintu poprawialo pomiar o setne i jednoczesnie gasilo zaznaczenie. Wyscig konczy sie po drugiej stronie: napis pozycji aktywnej jest neutralny, a tint moze byc widoczny. */ --akcent-dim: #2AD18E1F; /* FAZY LICZNIKA: jedyne trzy tokeny, ktorych motyw jasny NIE nadpisywal. Braly wiec wartosci z motywu ciemnego i na bieli dawaly 2,75 / 2,30 / 3,53:1 - dwie ponizej progu 3:1 nawet dla znaku graficznego. Ten sam tryb awarii, co przy --akcent-dim: token pominiety w drugim motywie nie znika, tylko po cichu dziedziczy nieodpowiednia wartosc. Bramka _test_kontrast liczy teraz oba motywy, wiec taki brak sam sie zglasza. */ --faza-l1: #1E86FF; --faza-l2: #119984; --faza-l3: #EC4798; --amber-dim: #A05F0033; --amber-light: #D98A1A; /* --uwaga to alias --pv uzywany JAKO TEKST (konsola: "steruje 3 z 13 instalacji"). Zostal przy starej wartosci i dawal 4,24:1, wiec jedzie razem z --pv. */ --uwaga: #A05F00; --tlo-uwaga: #A05F0014; --obrys-uwaga: #A05F0059; --login-bg: linear-gradient(135deg,#FFFFFF 0%,#FAFBFC 50%,#F1F4F7 100%); } /* Ochrona liczb przed tlumaczem przegladarki (koncept 19): tlumacz potrafi zamienic separator dziesietny i z 1,18 zł zrobic 118 zł. */ .liczba, .stat-value, .kpi-card-value { -webkit-user-modify: read-only; } /* ── BB3 / WCAG 2.5.5: CEL DOTKNIECIA 44 px (17.08.2026) ───────────────────── Pomiar przed zmiana: zero elementow z zadeklarowanym celem dotkniecia. Pigulki serii mialy 26 px wysokosci - na telefonie trzeba je trafiac paznokciem, a sasiednia lapie klikniecie. Regula stoi TUTAJ, a nie w trzydziestu szesciu plikach, bo dostepnosc dopisywana recznie rozjezdza sie po tygodniu - dokladnie tak, jak rozjechaly sie kolory, zanim powstaly tokeny. `pointer: coarse` celowo: warunek dotyczy palca, nie kursora. Na pulpicie wymuszanie 44 px rozdmuchaloby gestosc tabel operatora, ktora jest tam potrzebna - a myszka trafia w 26 px bez trudu. */ @media (pointer: coarse) { button, [role="button"], a.btn, input[type="checkbox"], input[type="radio"] { min-height: 44px; min-width: 44px; } /* WYLICZANIE TYPOW POLA ZAWSZE BEDZIE NIEPELNE. Pierwsza wersja wymieniala text/password/email/number i przepuscila `type="date"` - trzy pola dat zostaly przy 36 px, bo zaden selektor ich nie dotyczyl. Teraz warunkiem jest TO, ZE COS JEST POLEM; wyjatki wypisujemy zamiast wlaczen. Szerokosci polom nie wymuszamy - obszar wpisywania to nie cel dotkniecia. */ select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .input-field { min-height: 44px; } }