/* Żetony systemu wizualnego są jednym źródłem prawdy wartości wizualnych, ułożonym w warstwy prymitywów, ról semantycznych motywu i wartości niezależnych od motywu. Prymitywy niosą surowe skale barw, zakazane do użycia wprost w komponentach. Warstwa semantyczna niesie role przypisane motywowi jasnemu i ciemnemu, oba równoprawne. Kierunek systemu: monochromatyczna precyzja, odcienie bieli w motywie jasnym, odcienie czerni w motywie ciemnym, jeden błękit sygnałowy. Każda para tekstu i tła ma zmierzony kontrast. Zasady nienegocjowalne: jednostka 4 piksele, oba motywy równoprawne, stan nigdy samym kolorem, zero blokad, norma WCAG 2.1 AA na wejściu. */ @import url('ruch.css'); :root { /* ==================================================================== 1 · PRYMITYWY ==================================================================== */ /* --- SZAROŚĆ — czysto neutralna (równe RGB): odcienie bieli i czerni */ --dn-szary-0: #FFFFFF; /* wyłącznie powierzchnie kart i tekst na atramencie */ --dn-szary-25: #F9FAFB; --dn-szary-50: #F3F4F6; --dn-szary-100: #EBECEF; --dn-szary-150: #E1E3E7; --dn-szary-200: #D5D7DC; --dn-szary-300: #BDC0C6; --dn-szary-400: #9A9EA6; --dn-szary-450: #8D9199; --dn-szary-500: #787C85; --dn-szary-600: #5D6169; --dn-szary-700: #464A52; --dn-szary-750: #373A41; --dn-szary-800: #272A30; --dn-szary-850: #1E2126; --dn-szary-900: #16181D; --dn-szary-925: #111317; --dn-szary-950: #0D0F13; --dn-szary-1000: #080A0D; /* kraniec skali; #000000 jest zakazane */ /* --- SYGNAŁ — błękit sygnałowy (jedyna barwa akcentu systemu) */ --dn-sygnal-100: #EDF3FE; --dn-sygnal-200: #C9DAFB; --dn-sygnal-300: #8FB2F5; --dn-sygnal-400: #5C8CEC; --dn-sygnal-500: #3B6FE0; /* bazowy — kropka sygnału, fokus */ --dn-sygnal-600: #2457C9; /* tekst i wypełnienia na jasnym */ --dn-sygnal-700: #1D49AF; --dn-sygnal-800: #173A8C; /* --- BRYŁA MODUŁU — paleta sceny przestrzennej */ /* Sześcian programu składany z klocków. Bryła nie ma własnego tła i kładzie się wprost na powierzchni okna, więc paleta jest JEDNA dla obu motywów: granatowe klocki z jasnoniebieską krawędzią czytają się i na atramencie, i na papierze. Ściany są półprzezroczyste — krycie należy do żetonu. */ --dn-bryla-linia: #68A8F6; /* krawędź klocka */ --dn-bryla-poswiata: #3474C8; /* poświata rdzenia, cień znaku */ --dn-bryla-lagodna: #84B6F0; /* obwód na blacie */ --dn-bryla-wezel: #A8CEF6; /* pierścień ukończonej warstwy */ --dn-bryla-blysk: #F0F8FF; /* błysk złożenia, impuls danych */ --dn-bryla-blat: rgba(41, 66, 101, .97); /* blat klocka */ --dn-bryla-blat-wierzch: rgba(52, 82, 122, .97);/* blat warstwy najwyższej */ --dn-bryla-bok: rgba(26, 45, 71, .97); /* bok bliższy kamerze */ --dn-bryla-bok-cien: rgba(17, 30, 48, .97); /* bok dalszy */ --dn-bryla-cien: rgba(16, 36, 66, .26); /* cień pod modułem */ --dn-bryla-plakietka: rgba(22, 36, 56, .92); /* podpis etapu */ --dn-bryla-plakietka-tekst: #E2EEFC; --dn-bryla-etykieta: #96B2D6; /* podpis warstwy na blacie */ /* Znak marki kreślony światłem — ekran startowy. Poświata jest jedna dla obu motywów, bo to barwa światła, a nie powierzchni: rozjaśnia to, na czym leży, czy będzie tym atrament okna, papier, czy pulpit użytkownika. */ --dn-znak-poswiata: #5C8CEC; /* --- STANY — prymitywy (informacja = rodzina sygnału) */ --dn-zielen-700: #1C7442; --dn-zielen-400: #4FBD85; --dn-zielen-200: #BCE3CD; --dn-zielen-100: #E7F5EE; --dn-bursztyn-700: #8A5B0C; --dn-bursztyn-400: #E0A63C; --dn-bursztyn-200: #EED9A7; --dn-bursztyn-100: #FBF2DE; --dn-czerwien-700: #BA342E; --dn-czerwien-400: #EE7168; --dn-czerwien-200: #F3C8C4; --dn-czerwien-100: #FCEDEB; /* ==================================================================== 2 · RAMA KOKPITU — stała w obu motywach ==================================================================== */ --dn-rama: var(--dn-szary-925); --dn-rama-grafit: var(--dn-szary-850); /* powierzchnie na atramencie ramy */ --dn-rama-tekst: var(--dn-szary-100); --dn-rama-tekst-2: var(--dn-szary-400); --dn-rama-tekst-3: var(--dn-szary-500); /* trzeci stopień jasności ramy — narzędzia stanowiska w stopce bocznej belki; 4,74 : 1 na ramie */ --dn-rama-tekst-4: var(--dn-szary-600); /* czwarty stopień — ustawienia w stopce bocznej belki; 3,10 : 1 na ramie, próg grafiki nietekstowej */ /* Stany na atramencie ramy. Rama nie zmienia się z motywem, więc role stanu mają tu własne żetony — semantyczne żetony stanu przełączają się z motywem i na stałej powierzchni atramentu byłyby nieczytelne. */ --dn-rama-sygnal: var(--dn-sygnal-400); /* wskazanie kroku bieżącego */ --dn-rama-sygnal-wypelnienie: var(--dn-sygnal-500); /* wypełnienie znacznika */ --dn-rama-sukces: var(--dn-zielen-400); /* czynność wykonana */ --dn-rama-hover: rgba(255, 255, 255, 0.08); --dn-rama-obrys: rgba(255, 255, 255, 0.10); --dn-rama-obrys-mocny: rgba(255, 255, 255, 0.24); /* ramka pozycji szyny nawigacji */ --dn-rama-tlo: rgba(255, 255, 255, 0.04); /* subtelna powierzchnia wtopiona w ramę — grupy przełączników */ --dn-rama-pole: rgba(255, 255, 255, 0.06); /* tło pola wyszukiwania na ramie */ /* ==================================================================== 3 · TYPOGRAFIA — trzy role, trzy kroje ==================================================================== */ --dn-ff-naglowek: 'Space Grotesk', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --dn-ff-bazowa: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --dn-ff-mono: 'IBM Plex Mono', 'Cascadia Mono', 'Consolas', monospace; /* stopnie — gęstość zwarta, baza 14 px (cała skala interfejsu +1 px) */ --dn-fs-xs: 12px; /* etykiety wersalikowe, nagłówki kolumn */ --dn-fs-sm: 13px; /* metadane, tekst pomocniczy */ --dn-fs-base: 14px; /* BAZOWY — tekst interfejsu */ --dn-fs-md: 15px; /* wyróżniona treść, wpisy rozmowy */ --dn-fs-lg: 17px; /* nagłówki paneli */ --dn-fs-xl: 21px; /* nagłówki okien i modali */ --dn-fs-2xl: 24px; /* tytuły sekcji strony głównej */ --dn-fs-3xl: 30px; /* tytuły kart środowisk */ /* Szczebel dołożony 27.08.2026: nazwa środowiska na karcie i nazwa modułu w kaflu strefy 2 stoją na jednym stopniu. Ani `3xl` (30 px), ani `display` (40 px) nie pasowały — pierwszy za mały wobec żądanego powiększenia, drugi zrównałby tytuł karty z tytułem strony. */ --dn-fs-4xl: 36px; /* nazwy środowisk i modułów na kaflach */ --dn-fs-display: 40px; /* największy stopień ekspozycyjny */ --dn-fw-normalna: 400; --dn-fw-srednia: 500; --dn-fw-polgruba: 600; --dn-fw-gruba: 700; --dn-lh-ciasny: 1.25; /* nagłówki */ --dn-lh-bazowy: 1.45; /* interfejs (zwarta gęstość) */ --dn-lh-luzny: 1.6; /* treść ciągła */ --dn-ls-naglowek: -0.01em; /* Space Grotesk w dużych stopniach */ --dn-ls-wersaliki: 0.08em; /* etykiety wersalikowe Plex Sans */ --dn-ls-mono-wersaliki: 0.14em; /* etykiety wersalikowe Plex Mono */ /* ==================================================================== 4 · PRZESTRZEŃ — jednostka bazowa 4 px, wartość nienegocjowalna ==================================================================== */ --dn-od-0: 0; --dn-od-05: 2px; /* półstopień siatki 4 px — najciaśniejszy odstęp, np. etykieta↔opis w kaflu */ --dn-od-1: 4px; --dn-od-2: 8px; --dn-od-3: 12px; --dn-od-4: 16px; --dn-od-5: 20px; --dn-od-6: 24px; --dn-od-8: 32px; --dn-od-10: 40px; --dn-od-12: 48px; --dn-od-16: 64px; /* jeden system narożników: precyzja instrumentu (małe promienie) */ --dn-r-xs: 3px; /* plakietki drobne, bloki kodu w wierszu */ --dn-r-sm: 6px; /* przyciski, pola, kontrolki */ --dn-r-md: 8px; /* karty pojedyncze, dymki */ --dn-r-lg: 10px; /* karty, modale, panele */ --dn-r-xl: 14px; /* karty środowisk, duże powierzchnie */ --dn-r-pill: 999px; /* plakietki stanu, przełączniki, kropki */ /* ==================================================================== 6 · WYMIARY — gęstość zwarta kokpitu ==================================================================== */ --dn-wym-kontrolka: 32px; /* przyciski, pola, pozycje wyboru */ --dn-wym-ikonowy: 34px; /* przycisk ikonowy */ --dn-wym-pole-dotyku: 24px; /* najmniejsze pole trafienia — WCAG 2.5.8 */ --dn-wym-belka-btn: 46px; /* przycisk sterowania oknem — szerokość wg Windows */ --dn-wym-belka: 48px; /* belka tytułowa okna — jej wysokość wyznacza szerokość szyny nawigacji */ --dn-wym-stan: 28px; /* pasek stanu (dolny) */ --dn-wym-pasek: 48px; /* pasek górny (rama) */ --dn-wym-pas-kart: 36px; /* pas kart sesji */ --dn-wym-wiersz: 36px; /* wiersz tabeli / listy */ --dn-wym-boczna: 224px; /* boczna nawigacja modułów */ --dn-wym-moduly: 200px; /* rejon nazw modułów, gdy stoi obok bocznej */ --dn-wym-pas-komunikacji: 320px; /* wysokość pasa komunikacji (powłoka środowiska) */ --dn-wym-modal: 560px; /* maksymalna szerokość modala */ --dn-wym-toast-min: 280px; --dn-wym-toast-max: 420px; --dn-wym-awatar-sm: 24px; --dn-wym-awatar: 28px; --dn-wym-awatar-lg: 36px; --dn-wym-ikona-xs: 12px; /* znacznik kryterium, znak w wykazie warunków */ --dn-wym-ikona-sm: 16px; --dn-wym-ikona: 18px; --dn-wym-ikona-szyna: 20px; /* ikona pozycji szyny nawigacji (szersza od belki) */ --dn-wym-ikona-lg: 22px; --dn-wym-ikona-xl: 26px; /* Godło — skale znaku z księgi marki. */ --dn-wym-godlo-ikonowy: var(--dn-wym-ikona); --dn-wym-godlo: 44px; /* kolumna tożsamości okna wejściowego */ --dn-wym-godlo-lg: 88px; /* odsłona powitalna, przygotowanie środowiska */ --dn-wym-godlo-lockup: 280px; /* znak poziomy z logotypem */ /* Okno sprzed uwierzytelnienia — wymiar stały, bo w produkcie jest oknem systemowym o zadanej wielkości, nie stroną skalującą się z przeglądarką. */ --dn-wym-szyna-krokow: 300px; /* kolumna kroków instalatora */ --dn-wym-bryly-min: 260px; /* pole bryły warstw — próg czytelności sceny */ --dn-wym-okno-instalatora-szer: 1020px; /* okno instalatora */ --dn-wym-okno-instalatora-wys: 720px; --dn-wym-okno-wejscia-wys: 780px; /* okno wejścia — gęstsze od kreatora */ --dn-wym-belka-instalatora: 44px; --dn-wym-stopki-instalatora: 64px; --dn-od-tresci-instalatora: 40px; --dn-wym-okno-wejsciowe-szer: 1040px; --dn-wym-okno-wejsciowe-wys: 720px; --dn-wym-okno-wejsciowe-kolumna: 384px; --dn-wym-przelacznik-szer: 36px; --dn-wym-przelacznik-wys: 20px; --dn-wym-kod-szer: 52px; /* pole jednego znaku kodu potwierdzenia */ --dn-wym-kod-wys: 60px; --dn-wym-krok-nr: 20px; /* numer w poziomym torze kroków */ --dn-wym-sila: 3px; /* odcinek miary siły hasła */ --dn-wym-check: 16px; --dn-wym-kropka: 6px; /* kropka sygnału */ --dn-wym-wstega: 2px; /* wstęga aktywności karty */ /* Cel kliknięcia grotu wejścia. Znak w środku jest niższy (--dn-wym-grot-znak): przycisk ma być duży pod palcem, znak marki — spokojny. */ --dn-wym-grot: 108px; /* cel przycisku grotu — obejmuje znak 88 x 54 px */ --dn-wym-grot-znak: 54px; /* wysokość podwójnego szewronu w przycisku */ /* Grot kafla modułu stoi na wartości niezależnej, nie na udziale celu: inaczej powiększenie przycisku na karcie środowiska pociągałoby za sobą kafle. */ --dn-wym-grot-sm: 36px; /* pojedynczy grot w kaflu modułu */ /* Emblemat środowiska i znak modułu mają jeden wymiar — rozstrzygnięcie Właściciela z 27.08.2026: kafel strefy 2 czyta się na równi z kartą strefy 1, więc znak nie może być od niej mniejszy. */ --dn-wym-godlo-karty: 62px; /* emblemat karty środowiska (54 + 15%) */ /* Znak kafla modułu ODWIĄZANY od emblematu karty: powiększenie emblematu dotyczyło kart środowisk, a w kaflu modułu nazwa 36 px nie ma już zapasu — każdy piksel znaku odbierany jest nazwie. */ --dn-wym-znak-modulu: 40px; /* znak kafla modułu */ --dn-wym-kafel-modulu: 122px; /* najmniejsza wysokość kafla modułu */ --dn-wym-spinner: 14px; --dn-wym-fokus: 2px; /* pierścień fokusu */ --dn-wym-fokus-odsuniecie: 2px; --dn-odstep-panel: var(--dn-od-3); /* wewnętrzny rytm paneli (12 px) */ --dn-odstep-sekcji: var(--dn-od-6); /* rytm między sekcjami (24 px) */ /* ==================================================================== 7 · SIATKA I PUNKTY ŁAMANIA ==================================================================== */ --dn-bp-w1: 640px; /* telefon poziomo — widok mobilny */ --dn-bp-w2: 960px; /* tablet — boczna nawigacja zwijana do ikon */ --dn-bp-w3: 1280px; /* biurko — pełny kokpit */ --dn-bp-w4: 1600px; /* szerokie biurko — dwa okna komunikacji (para koordynator–wykonawca) */ --dn-tresc-max: 1200px; /* maks. szerokość treści dokumentowej */ --dn-siatka-kolumny: 12; --dn-siatka-przerwa: var(--dn-od-6); /* ==================================================================== 8 · WARSTWY, kolejność z-index ==================================================================== */ --dn-z-podloga: 0; --dn-z-przybornik: 10; /* przyklejone nagłówki tabel, przybornik */ --dn-z-pasek: 100; /* pasek górny (rama) */ --dn-z-boczna: 200; /* boczna nawigacja */ --dn-z-pas-komunikacji: 300; --dn-z-nakladka: 800; /* przyciemnienie pod modalem */ --dn-z-modal: 900; --dn-z-powiadomienie: 1000; /* toasty */ --dn-z-tooltip: 1100; --dn-z-aod: 1200; /* Always On Display */ --dn-z-centrum-polecen: 1300; /* Command Center — zawsze najwyżej */ /* ==================================================================== 9 · GRADIENTY, użycie wyłącznie ilustracyjne ==================================================================== */ --dn-grad-atrament: linear-gradient(180deg, var(--dn-szary-800), var(--dn-szary-925)); --dn-grad-sygnal: linear-gradient(135deg, var(--dn-sygnal-400), var(--dn-sygnal-600)); /* Zakres: awatary bez zdjęcia, rdzeń AOD, grafiki brandowe. Gradient NIGDY nie jest tłem przycisku, karty ani sekcji. */ /* Barwy wywodzone: trzy role powstają z domieszki color-mix, nie z osobnego odcienia palety. */ --dn-obrys-marki: color-mix(in oklab, var(--dn-sygnal-500) 46%, var(--dn-obrys-mocny)); --dn-tlo-wybrane: color-mix(in oklab, var(--dn-sygnal-500) 13%, var(--dn-wstazka)); --dn-tekst-opis: color-mix(in oklab, var(--dn-tekst-3) 60%, var(--dn-tekst-2)); } /* Przeglądarka bez obsługi funkcji color-mix dostaje najbliższy odcień palety zamiast wyliczonej domieszki barw. */ @supports not (color: color-mix(in oklab, red, blue)) { :root { --dn-obrys-marki: var(--dn-sygnal-800); --dn-tlo-wybrane: var(--dn-wstazka); --dn-tekst-opis: var(--dn-tekst-2); } } /* ========================================================================== * 10 · MOTYW JASNY — odcienie bieli (definiowany osobno, nie wywodzony) * ========================================================================== */ :root[data-theme='light'] { /* ── Okno przedaplikacyjne: trzy strefy, trzy barwy ────────────────────── Zasada obowiązująca: belka tytułowa jest najciemniejsza, a kolumna boczna i pas działań NIE MOGĄ mieć jej barwy. Trzy stopnie, obowiązkowo różne w obu motywach — instalator, uruchomienie, logowanie i każde następne okno tego rodzaju biorą je stąd, nie ustalają własnych. */ --dn-okno-belka: var(--dn-szary-925); --dn-okno-obrzeze: var(--dn-szary-100); --dn-okno-plotno: var(--dn-szary-0); --dn-okno-obrys: var(--dn-szary-200); --dn-okno-karta: var(--dn-szary-0); color-scheme: light; /* DRABINA POWIERZCHNI MOTYWU JASNEGO — przebudowana 27.08.2026. Dwie usterki, obie policzone. PIERWSZA — drabina była płaska: 2,0 L* między tłem a panelem i 1,8 L* między panelem a kartą, przy 8,3 i 4,4 L* w motywie ciemnym. Hierarchię niosła wyłącznie kreska włosowa, więc okno czytało się jako jedno białe pole. DRUGA, głębsza — drabina była ODWRÓCONA wobec ciemnego. Karta środowiska bierze `--dn-panel`, a pojemnik pod nią `--dn-powierzchnia`. W ciemnym dawało to kartę NAD pojemnikiem (12,6 wobec 8,2 L*), w jasnym POD nim (96,2 wobec 100) — karta czytała się jako wgłębienie, nie jako uniesienie. Żadne pogłębienie samych wartości tego nie naprawia: naprawia to dopiero ta sama KOLEJNOŚĆ ról w obu motywach. Kolejność jest teraz wspólna — od gruntu w górę: tło ≤ powierzchnia-2 < powierzchnia < panel < wstążka jasny: 90,2 90,2 93,4 96,2 100 ciemny: 4,3 5,8 8,2 12,6 17,0 Para, która ma znaczenie dla oka: KARTA (`--dn-panel`) wobec TACY, na której leży (`--dn-wstazka`, bo tak maluje się `.dn-obszar-panel`). Karta jest o stopień CIEMNIEJSZA od tacy w obu motywach — to zamierzone, tak samo jak w ciemnym (12,6 wobec 17,0 = 4,4 L*). W jasnym było 1,8 L*; teraz jest 3,8 L*. Dlaczego cztery szczeble, a nie pięć: pełna piątka o skokach ciemnego wymaga gruntu na 86 L*, a na nim `--dn-tekst-2` daje 4,32 : 1 — pod progiem 4,5 : 1. Motyw jasny ma mniej zapasu niż ciemny, więc grunt zostaje na 90,2, a wgłębienie dzieli z nim szczebel: wgłębienie w jasnym rozpoznaje się kreską wpuszczoną, nie wypełnieniem. Rozpiętość drabiny jasnego wynosi 9,8 L* przy 12,7 L* ciemnego — bez łamania AA więcej nie ma. Wartości wyłącznie ze szczebli palety; żaden nowy szczebel nie powstał. Kontrasty po zmianie (tekst 12 px i większy, wszystkie ≥ 4,5 : 1): tekst 13,8 : 1 na gruncie · 17,8 : 1 na tacy tekst-2 4,84 : 1 na gruncie · 6,21 : 1 na tacy tekst-3 4,84 : 1 na gruncie · 6,21 : 1 na tacy */ --dn-tlo: var(--dn-szary-150); /* #E1E3E7 · L* 90,2 — grunt */ --dn-powierzchnia-2: var(--dn-szary-150); /* #E1E3E7 · L* 90,2 — wgłębienia, tory */ --dn-powierzchnia: var(--dn-szary-100); /* #EBECEF · L* 93,4 — okna, pojemniki */ --dn-panel: var(--dn-szary-50); /* #F3F4F6 · L* 96,2 — karty i panele */ --dn-wstazka: var(--dn-szary-0); /* #FFFFFF · L* 100 — taca pod kartą */ --dn-wstazka-taca: var(--dn-szary-100); /* #EBECEF · L* 93,4 */ --dn-hover: rgba(10, 10, 10, 0.05); --dn-wcisniecie: rgba(10, 10, 10, 0.09); --dn-nakladka: rgba(10, 10, 10, 0.45); /* Kreski schodzą pod grunt: obrys na szczeblu tła byłby na nim niewidoczny, a rozdzielenie ma nieść powierzchnia I kreska, nie jedno z dwojga. */ --dn-obrys: var(--dn-szary-200); /* #D5D7DC · L* 86 */ --dn-obrys-subtelny: var(--dn-szary-150); /* #E1E3E7 · L* 90,2 */ /* Granica kontrolki musi być widoczna: WCAG 1.4.11 wymaga 3:1 dla elementu, który identyfikuje pole. Odcień 300 dawał w jasnym 1,42–1,82:1, a 750 w ciemnym 1,26–1,68:1 — pola nie było widać. Odcień 500 przechodzi w OBU motywach (3,26–4,59) i odpowiada domyślnemu obrysowi kontrolki w przeglądarce (#767676). */ --dn-obrys-mocny: var(--dn-szary-500); /* #787C85 — obrysy kontrolek */ /* Kreska wyrazna — kontrolka stojaca na plotnie, bez wlasnego wypelnienia. Obrys mocny daje na powierzchni panelu 8 stopni L* i ginie; ten daje 30. */ --dn-obrys-wyrazny: var(--dn-szary-400); /* #9A9EA6 · L* 63 */ --dn-tekst: var(--dn-szary-900); /* #16181D · 16,1:1 na tle */ /* Stopień między pierwszym a drugim — dla podtytułów. Bez niego podtytuł pożyczał barwę tytułu i różnił się od niego wyłącznie stopniem pisma, przez co po nagłówku wszystko czytało się jednym głosem. */ --dn-tekst-wiodacy: var(--dn-szary-700); --dn-tekst-2: var(--dn-szary-600); /* #5D6169 · 6,21:1 na karcie */ /* Trzeci stopień zszedł na szczebel drugiego. Powód policzalny: na szczeblu 500 dawał 3,80:1 na dawnym gruncie i 3,26:1 na pogłębionym — pod progiem 4,5:1 dla tekstu poniżej 18,66 px, a niosą go metadane pisane na 12 px. Między szczeblem 500 a 600 nie ma szczebla, który by próg przeszedł (550 dałby 3,92:1), więc w motywie jasnym trzeci stopień NIE JEST rangą barwy — rozróżnienie niesie pismo: krój maszynowy i stopień 12 px (`.dn-meta`, `.dn-etyk-mono`). W motywie ciemnym ranga barwy zostaje. Ta zmiana zdejmuje powód pięciu obejść rozsianych po bibliotece, które miejscowo podnosiły metadane o stopień wyżej. */ --dn-tekst-3: var(--dn-szary-600); /* #5D6169 · 4,84:1 na gruncie */ --dn-tekst-inv: var(--dn-szary-0); /* działanie główne — inwersja atramentu */ --dn-atrament: var(--dn-szary-900); --dn-atrament-hover: var(--dn-szary-1000); --dn-atrament-tekst: var(--dn-szary-0); /* sygnał */ --dn-sygnal: var(--dn-sygnal-600); /* tekst, odnośniki · 5,5:1 */ --dn-sygnal-mocny: var(--dn-sygnal-700); --dn-sygnal-wypelnienie: var(--dn-sygnal-600);/* biel na nim: 5,5:1 */ --dn-sygnal-wypelnienie-hover: var(--dn-sygnal-700); --dn-sygnal-tlo: var(--dn-sygnal-100); --dn-sygnal-obrys: var(--dn-sygnal-200); --dn-kropka: var(--dn-sygnal-500); --dn-znak-lico: #12151A; /* przednia ściana znaku */ --dn-znak-bok: #2B3442; /* ścianki wyciągnięcia w głąb */ --dn-znak-halo: rgba(255, 255, 255, 0.65); /* poświata pod wypełnionym znakiem */ --dn-fokus: var(--dn-sygnal-500); --dn-fokus-cien: rgba(59, 111, 224, 0.30); /* stany — komplet par zmierzony (kontrasty.json) */ --dn-sukces-tekst: var(--dn-zielen-700); --dn-sukces-tlo: var(--dn-zielen-100); --dn-sukces-obrys: var(--dn-zielen-200); --dn-ostrzezenie-tekst: var(--dn-bursztyn-700); --dn-ostrzezenie-tlo: var(--dn-bursztyn-100); --dn-ostrzezenie-obrys: var(--dn-bursztyn-200); --dn-blad-tekst: var(--dn-czerwien-700); --dn-blad-tlo: var(--dn-czerwien-100); --dn-blad-obrys: var(--dn-czerwien-200); --dn-informacja-tekst: var(--dn-sygnal-600); --dn-informacja-tlo: var(--dn-sygnal-100); --dn-informacja-obrys: var(--dn-sygnal-200); /* cienie — tonowane neutralnie, jeden kierunek światła (z góry) */ --dn-cien-1: 0 1px 2px rgba(10, 10, 10, 0.05); --dn-cien-2: 0 2px 8px rgba(10, 10, 10, 0.07), 0 1px 2px rgba(10, 10, 10, 0.05); --dn-cien-3: 0 8px 24px rgba(10, 10, 10, 0.12); --dn-cien-lg: 0 20px 48px rgba(10, 10, 10, 0.18); --dn-cien-sygnal: 0 0 0 3px rgba(59, 111, 224, 0.18); /* Żeton cień-sygnał obejmuje pierścień pola aktywnego oraz poświatę kropki, pozostając na razie zarezerwowany, nieużywany jeszcze przez żaden komponent. */ } /* ========================================================================== * 11 · MOTYW CIEMNY — odcienie czerni (definiowany osobno, nie wywodzony) * ========================================================================== */ :root[data-theme='dark'] { /* ── Okno przedaplikacyjne: trzy strefy, trzy barwy ────────────────────── Zasada obowiązująca: belka tytułowa jest najciemniejsza, a kolumna boczna i pas działań NIE MOGĄ mieć jej barwy. Trzy stopnie, obowiązkowo różne w obu motywach — instalator, uruchomienie, logowanie i każde następne okno tego rodzaju biorą je stąd, nie ustalają własnych. */ --dn-okno-belka: #0B0D11; /* oklch(0.16) */ --dn-okno-obrzeze: #14161B; /* oklch(0.20) */ --dn-okno-plotno: #1C1F24; /* oklch(0.24) */ --dn-okno-obrys: #2B2E34; /* oklch(0.30) */ --dn-okno-karta: #2B2E34; /* warstwy bryły — o stopień nad obrzeżem */ color-scheme: dark; --dn-tlo: var(--dn-szary-950); /* #0D0F13 */ --dn-powierzchnia: var(--dn-szary-900); /* #16181D — karty, okna */ --dn-powierzchnia-2: var(--dn-szary-925); /* #111317 — wgłębienia */ --dn-panel: var(--dn-szary-850); /* #1E2126 — panele uniesione */ --dn-wstazka: var(--dn-szary-800); /* #272A30 — belka nakładana paska edycji */ --dn-wstazka-taca: var(--dn-szary-950); /* #0D0F13 — taca pod belką nakładaną */ --dn-hover: rgba(255, 255, 255, 0.06); --dn-wcisniecie: rgba(255, 255, 255, 0.10); --dn-nakladka: rgba(0, 0, 0, 0.62); --dn-obrys: var(--dn-szary-800); /* #272A30 */ --dn-obrys-subtelny: var(--dn-szary-850); /* #1E2126 */ --dn-obrys-mocny: var(--dn-szary-500); /* #787C85 — jak w jasnym: jeden odcień przechodzi w obu */ --dn-obrys-wyrazny: var(--dn-szary-700); /* #464A52 · L* 31,4 */ --dn-tekst: var(--dn-szary-100); /* #EBECEF · 15,0:1 na tle */ /* Stopień między pierwszym a drugim — dla podtytułów. Bez niego podtytuł pożyczał barwę tytułu i różnił się od niego wyłącznie stopniem pisma, przez co po nagłówku wszystko czytało się jednym głosem. */ --dn-tekst-wiodacy: var(--dn-szary-300); --dn-tekst-2: var(--dn-szary-400); /* #9A9EA6 · 6,8:1 na tle */ /* W ciemnym trzeci stopień nie może iść odcieniem 500: na panelu daje 3,86:1, a WCAG 1.4.3 wymaga 4,50 dla pisma drobnego, którym metadane są z definicji. Odcień 450 przechodzi na wszystkich czterech powierzchniach (4,55–5,88) i zostaje odrębny od drugiego stopnia. */ --dn-tekst-3: var(--dn-szary-450); /* #8D9199 · wyłącznie metadane */ --dn-tekst-inv: var(--dn-szary-950); /* działanie główne — inwersja atramentu (tu: biel) */ --dn-atrament: var(--dn-szary-100); --dn-atrament-hover: var(--dn-szary-25); --dn-atrament-tekst: var(--dn-szary-950); /* sygnał */ --dn-sygnal: var(--dn-sygnal-300); /* tekst, odnośniki · 8,0:1 */ --dn-sygnal-mocny: var(--dn-sygnal-200); --dn-sygnal-wypelnienie: var(--dn-sygnal-500);/* biel na nim: 4,6:1 */ --dn-sygnal-wypelnienie-hover: var(--dn-sygnal-400); --dn-sygnal-tlo: rgba(59, 111, 224, 0.16); --dn-sygnal-obrys: rgba(92, 140, 236, 0.40); --dn-kropka: var(--dn-sygnal-400); --dn-znak-lico: #F4F4F4; /* przednia ściana znaku */ --dn-znak-bok: #C9D8EC; /* ścianki wyciągnięcia w głąb */ --dn-znak-halo: rgba(6, 12, 20, 0.55); /* poświata pod wypełnionym znakiem */ --dn-fokus: var(--dn-sygnal-400); --dn-fokus-cien: rgba(92, 140, 236, 0.35); /* stany — pełny komplet dla motywu ciemnego */ --dn-sukces-tekst: var(--dn-zielen-400); --dn-sukces-tlo: #27372F; --dn-sukces-obrys: rgba(79, 189, 133, 0.34); --dn-ostrzezenie-tekst: var(--dn-bursztyn-400); --dn-ostrzezenie-tlo: #3C3425; --dn-ostrzezenie-obrys: rgba(224, 166, 60, 0.34); --dn-blad-tekst: var(--dn-czerwien-400); --dn-blad-tlo: #3A2B2A; --dn-blad-obrys: rgba(238, 113, 104, 0.34); --dn-informacja-tekst: var(--dn-sygnal-300); --dn-informacja-tlo: #252D40; --dn-informacja-obrys: rgba(92, 140, 236, 0.40); /* cienie — głębsze; przełączają się wraz z motywem */ --dn-cien-1: 0 1px 2px rgba(0, 0, 0, 0.35); --dn-cien-2: 0 3px 10px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.30); --dn-cien-3: 0 10px 30px rgba(0, 0, 0, 0.52); --dn-cien-lg: 0 24px 60px rgba(0, 0, 0, 0.65); --dn-cien-sygnal: 0 0 0 3px rgba(92, 140, 236, 0.22); } /* Brak jawnego wyboru — rozstrzyga preferencja systemu. Wartości muszą być identyczne z blokami motywów; powielenie jest świadome i stanowi mechanizm kaskady, nie drugie źródło prawdy. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --dn-tekst-wiodacy: var(--dn-szary-700); /* Strefy okna przedaplikacyjnego — te same trzy stopnie co przy wyborze ręcznym. */ --dn-okno-belka: var(--dn-szary-925); --dn-okno-obrzeze: var(--dn-szary-100); --dn-okno-plotno: var(--dn-szary-0); --dn-okno-obrys: var(--dn-szary-200); --dn-okno-karta: var(--dn-szary-0); color-scheme: light; --dn-tlo: var(--dn-szary-50); --dn-powierzchnia: var(--dn-szary-0); --dn-powierzchnia-2: var(--dn-szary-100); --dn-panel: var(--dn-szary-25); --dn-wstazka: var(--dn-szary-0); --dn-wstazka-taca: var(--dn-szary-150); --dn-hover: rgba(10, 10, 10, 0.05); --dn-wcisniecie: rgba(10, 10, 10, 0.09); --dn-nakladka: rgba(10, 10, 10, 0.45); --dn-obrys: var(--dn-szary-150); --dn-obrys-subtelny: var(--dn-szary-100); --dn-obrys-mocny: var(--dn-szary-500); --dn-tekst: var(--dn-szary-900); --dn-tekst-2: var(--dn-szary-600); --dn-tekst-3: var(--dn-szary-600); --dn-tekst-inv: var(--dn-szary-0); --dn-atrament: var(--dn-szary-900); --dn-atrament-hover: var(--dn-szary-1000); --dn-atrament-tekst: var(--dn-szary-0); --dn-sygnal: var(--dn-sygnal-600); --dn-sygnal-mocny: var(--dn-sygnal-700); --dn-sygnal-wypelnienie: var(--dn-sygnal-600); --dn-sygnal-wypelnienie-hover: var(--dn-sygnal-700); --dn-sygnal-tlo: var(--dn-sygnal-100); --dn-sygnal-obrys: var(--dn-sygnal-200); --dn-kropka: var(--dn-sygnal-500); --dn-znak-lico: #12151A; --dn-znak-bok: #2B3442; --dn-znak-halo: rgba(255, 255, 255, 0.65); --dn-fokus: var(--dn-sygnal-500); --dn-fokus-cien: rgba(59, 111, 224, 0.30); --dn-sukces-tekst: var(--dn-zielen-700); --dn-sukces-tlo: var(--dn-zielen-100); --dn-sukces-obrys: var(--dn-zielen-200); --dn-ostrzezenie-tekst: var(--dn-bursztyn-700); --dn-ostrzezenie-tlo: var(--dn-bursztyn-100); --dn-ostrzezenie-obrys: var(--dn-bursztyn-200); --dn-blad-tekst: var(--dn-czerwien-700); --dn-blad-tlo: var(--dn-czerwien-100); --dn-blad-obrys: var(--dn-czerwien-200); --dn-informacja-tekst: var(--dn-sygnal-600); --dn-informacja-tlo: var(--dn-sygnal-100); --dn-informacja-obrys: var(--dn-sygnal-200); --dn-cien-1: 0 1px 2px rgba(10, 10, 10, 0.05); --dn-cien-2: 0 2px 8px rgba(10, 10, 10, 0.07), 0 1px 2px rgba(10, 10, 10, 0.05); --dn-cien-3: 0 8px 24px rgba(10, 10, 10, 0.12); --dn-cien-lg: 0 20px 48px rgba(10, 10, 10, 0.18); --dn-cien-sygnal: 0 0 0 3px rgba(59, 111, 224, 0.18); } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --dn-tekst-wiodacy: var(--dn-szary-300); /* Strefy okna przedaplikacyjnego — te same trzy stopnie co przy wyborze ręcznym. */ --dn-okno-belka: #0B0D11; --dn-okno-obrzeze: #14161B; --dn-okno-plotno: #1C1F24; --dn-okno-obrys: #2B2E34; --dn-okno-karta: #2B2E34; color-scheme: dark; --dn-tlo: var(--dn-szary-950); --dn-powierzchnia: var(--dn-szary-900); --dn-powierzchnia-2: var(--dn-szary-925); --dn-panel: var(--dn-szary-850); --dn-wstazka: var(--dn-szary-800); --dn-wstazka-taca: var(--dn-szary-950); --dn-hover: rgba(255, 255, 255, 0.06); --dn-wcisniecie: rgba(255, 255, 255, 0.10); --dn-nakladka: rgba(0, 0, 0, 0.62); --dn-obrys: var(--dn-szary-800); --dn-obrys-subtelny: var(--dn-szary-850); --dn-obrys-mocny: var(--dn-szary-500); --dn-tekst: var(--dn-szary-100); --dn-tekst-2: var(--dn-szary-400); --dn-tekst-3: var(--dn-szary-450); --dn-tekst-inv: var(--dn-szary-950); --dn-atrament: var(--dn-szary-100); --dn-atrament-hover: var(--dn-szary-25); --dn-atrament-tekst: var(--dn-szary-950); --dn-sygnal: var(--dn-sygnal-300); --dn-sygnal-mocny: var(--dn-sygnal-200); --dn-sygnal-wypelnienie: var(--dn-sygnal-500); --dn-sygnal-wypelnienie-hover: var(--dn-sygnal-400); --dn-sygnal-tlo: rgba(59, 111, 224, 0.16); --dn-sygnal-obrys: rgba(92, 140, 236, 0.40); --dn-kropka: var(--dn-sygnal-400); --dn-znak-lico: #F4F4F4; --dn-znak-bok: #C9D8EC; --dn-znak-halo: rgba(6, 12, 20, 0.55); --dn-fokus: var(--dn-sygnal-400); --dn-fokus-cien: rgba(92, 140, 236, 0.35); --dn-sukces-tekst: var(--dn-zielen-400); --dn-sukces-tlo: #27372F; --dn-sukces-obrys: rgba(79, 189, 133, 0.34); --dn-ostrzezenie-tekst: var(--dn-bursztyn-400); --dn-ostrzezenie-tlo: #3C3425; --dn-ostrzezenie-obrys: rgba(224, 166, 60, 0.34); --dn-blad-tekst: var(--dn-czerwien-400); --dn-blad-tlo: #3A2B2A; --dn-blad-obrys: rgba(238, 113, 104, 0.34); --dn-informacja-tekst: var(--dn-sygnal-300); --dn-informacja-tlo: #252D40; --dn-informacja-obrys: rgba(92, 140, 236, 0.40); --dn-cien-1: 0 1px 2px rgba(0, 0, 0, 0.35); --dn-cien-2: 0 3px 10px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.30); --dn-cien-3: 0 10px 30px rgba(0, 0, 0, 0.52); --dn-cien-lg: 0 24px 60px rgba(0, 0, 0, 0.65); --dn-cien-sygnal: 0 0 0 3px rgba(92, 140, 236, 0.22); } } /* ========================================================================== * 12 · DOTYK — cele dotykowe rosną żetonem, nie wyjątkiem * ========================================================================== */ @media (pointer: coarse) { :root { --dn-wym-kontrolka: 40px; --dn-wym-ikonowy: 40px; --dn-wym-wiersz: 44px; --dn-wym-check: 20px; --dn-wym-przelacznik-szer: 44px; --dn-wym-przelacznik-wys: 24px; } } /* ========================================================================== * 13 · GĘSTOŚĆ PRZESTRONNA — przygotowana, domyślnie nieaktywna * ========================================================================== */ :root[data-gestosc='przestronna'] { --dn-fs-base: 14px; --dn-lh-bazowy: 1.5; --dn-wym-kontrolka: 40px; --dn-wym-ikonowy: 40px; --dn-wym-wiersz: 44px; --dn-wym-pasek: 56px; --dn-wym-pas-kart: 40px; --dn-odstep-panel: var(--dn-od-5); --dn-odstep-sekcji: var(--dn-od-8); }