/* ============================================================================ Strefa Ucznia - tokeny kolorystyczne ---------------------------------------------------------------------------- Dwie palety do wyboru na zywo. Przelacznik ustawia data-palette="a" | "b" na . Motyw jasny/ciemny ustawia data-theme="light" | "dark"; brak atrybutu = decyduje prefers-color-scheme. Zadna wartosc koloru nie moze byc zapisana bezposrednio w komponencie - komponenty siegaja WYLACZNIE po zmienne semantyczne z sekcji "role". ZMIANA 2026-08-31 (Adrian): paleta zloto-granatowa WYRZUCONA. Paleta A to teraz zielen, paleta B (granat + czerwien) zostaje jako druga opcja do wyboru. SKAD SIE WZIELY ODCIENIE, KTORYCH NIE MA NA PALECIE OD ADRIANA: piec kolorow z palety (#00b796, #5d9d8a, #f5f5f5, #f3eada, #ffefca) to same jasne tony. Sprawdzone rachunkiem: ZADEN z nich nie uniesie bialego tekstu - najlepszy, #00b796, daje kontrast 2,56 przy wymaganych 4,5. A pasek gorny i stopka maja bialy tekst na tle `--brand-deep`. Dlatego ciemne zielenie ponizej sa DOLICZONE z odcienia akcentu (169 st.), nie dobrane na oko. Kazda para kolorow uzywana w interfejsie zostala policzona pod WCAG AA - wyniki w komentarzach przy rolach. DRUGA KOREKTA 2026-08-31 wieczorem (Adrian): MIETA #edfdf8 WYRZUCONA, wchodzi KREM #ffefca. Powod jest kompozycyjny, nie estetyczny: "paleta Czerwien fajnie wspolgra, bo to zestawienie 2 harmonicznych barw w 2 tonacjach i jednym kolorze neutralnym". Zielen miala miete, czyli DRUGI TON TEGO SAMEGO koloru - zamiast dialogu wychodzil monolog. Uklad jest teraz taki sam jak w Czerwieni: barwa 1 (zimna) zielen #00b796 akcent + #075a4b / #053d33 ciemne barwa 2 (cieple) piasek i krem #f3eada + #ffefca neutral szarosc #f5f5f5 Razem z mieta wypadla MIETOWA OBWODKA #cfe3dc, i to ona odpowiadala za wieksza czesc zarzutu "nadmiar mieta rozprasza" - obwodki sa na kazdej karcie, tabeli i progu w gryfie, wiec bylo jej wiecej niz samego tla. Zastapiona ciepla #e7dcc6 o TEJ SAMEJ jasnosci (L 0,723 kontra 0,734), zeby zmienil sie odcien, a nie sila kreski: 1,36 na bieli kontra 1,34 wczesniej. TRZECIA KOREKTA 2026-09-01 (Adrian): "wciaz sie gryzie, mieta ma byc ograniczona, ten intensywnie zolty piaskowy mi nie odpowiada". Poprosil o wyjasnienie TECHNICZNE, nie estetyczne - wiec policzylem obie palety w tej samej skali i przyczyna okazala sie mierzalna: paleta struktura (pasek) akcent (przyciski) ODLEGLOSC ODCIENIA Czerwien granat H 214 czerwien H 5 151,9 stopnia Zielen zielen H 169 turkus H 169 0,1 stopnia To jest cala diagnoza. W Czerwieni akcent lezy po drugiej stronie kola barw - dwa rozne kolory, ktore ze soba rozmawiaja. W Zieleni akcent byl TYM SAMYM kolorem co pasek nawigacji, tylko jasniejszym i mocniej nasyconym: jeden kolor w trzech jasnosciach, czyli monolog. Do tego nasycenie akcentu wynosilo 100 %, czyli maksimum, jakie w ogole istnieje (w Czerwieni 57 %). Trzecia roznica, najbardziej podstepna, bo dziala podprogowo: BIEGUNOWOSC NAPISU. Przycisk Czerwieni jest ciemny z BIALYM napisem - czyta sie jako element ciezki i solidny. Przycisk Zieleni byl jasny z CIEMNYM napisem - czytal sie jak zakreslacz. Ta sama forma, zupelnie inna waga. NAPRAWA. Akcentem zostaje #1e634a WPROST OD ADRIANA - i jego strzal jest trafiony rachunkiem: unosi bialy tekst z zapasem (7,15), ma nasycenie 54 % zamiast 100 % i odcien 158 st. zamiast 169, wiec przestaje byc turkusem. Turkus #00b796 nie znika z palety - schodzi do roli, ktora Adrian nazwal "ograniczona": akcent CIEMNEGO motywu, gdzie ciemna zielen bylaby niewidoczna. CZEGO NIE ZROBILEM I DLACZEGO: * #458958 (propozycja Adriana na guziki) NIE nadaje sie pod napis. Bialy daje 4,22, ciemny 4,39 - OBA ponizej progu 4,5. To martwa strefa: kolor o srodkowej jasnosci nie uniesie ani jednego, ani drugiego. (Wypadl przy korekcie czwartej - nie znalazl roli.) * #f9f871 (propozycja zamiast kremu) idzie w strone PRZECIWNA do skargi: ma S 92 % przy L 71 %, czyli jest wyraznie mocniejszy niz odrzucony #ffefca (S 100 %, ale L 90 %, wiec blady). Jako tlo bylby zakreslaczem. (Wypadl przy korekcie czwartej - patrz nizej.) * KREM #ffefca wypada calkiem. Powierzchnia wyniosla to teraz biel z cieniem - "ograniczyc sie w przejsciu tonalnym do #f3eada" (Adrian). Cieplym tonem zostaje wylacznie piasek. PIATA KOREKTA 2026-09-01, PO MOCKUPACH: hybryda wariantow 1 i 2. Adrian odrzucil miedz ("smutno/ponuro") i wskazal wlasny bursztyn #e2a336, ale po zobaczeniu trzech propozycji wybral uklad, w ktorym: ZIELEN ROBI AKCJE. BURSZTYN OZNACZA STAN. Przycisk jest zielony (#147b44, bialy napis 5,32), a bursztyn swieci tam, gdzie cos JEST WLACZONE albo WYROZNIONE: aktywna pozycja menu (5,53 na pasku) i tonika na gryfie. Dzieki temu zielen zostaje kolorem, ktory sie klika, wiec nazwa palety dalej sie broni - a to byl zarzut samego Adriana przy przelaczniku ("podswietlenie na opcji Zielen ma byc zielone"). SKAD SIE WZIELA PONUROSC POPRZEDNIEJ WERSJI - to nie byl odcien, tylko jasnosc tego, co zajmuje duzo miejsca. Trzy rzeczy przygaszone naraz: pasek (jasnosc 12,9 %), akcent-miedz (39,0 %) i tlo bez koloru (nasycenie 0 %). Najmocniejszy kolor na ekranie siedzial w dolnej polowie skali jasnosci. Bursztyn ma jasnosc 54,9 % i nasycenie 74,8 % - i to on zdejmuje ponurosc, mimo ze zajmuje malo miejsca. DWA WARUNKI UZYCIA BURSZTYNU, oba wynikaja z rachunku: * NIESIE TYLKO CIEMNY NAPIS (7,76). Bialy daje 2,20. To nie jest powrot do odrzuconej miety - mieta wygladala jak zakreslacz przez nasycenie 100 %, tu jest 75 %, a bursztyn z ciemnym napisem to uznana forma plakietki. * NA JASNYM TLE STRONY DAJE 2,02, wiec sam nie ma krawedzi. Dlatego swieci wylacznie na CIEMNYM pasku (5,53) albo w kropce z obwodka `--brand` (8,16). Bursztynowy przycisk na szarym tle rozplywalby sie - i dlatego przycisk jest zielony, a nie bursztynowy. MIEDZ (#9a512d i rodzina copper) WYPADA CALKIEM. DLACZEGO MIEDZ, A NIE BURSZTYN, O KTORY PROSIL. Zolty ma najwyzsza jasnosc wlasna ze wszystkich barw. Zeby uniosl bialy napis, trzeba go przyciemnic, a przyciemniony zolty PRZESTAJE BYC ZOLTY i staje sie brazem. Ten sam odcien 38 st. w kolejnych jasnosciach, kontrast z bialym napisem: L 85 % #f5e0bc 1,29 L 55 % #e2a336 2,20 L 31 % #8a5f14 5,63 L 70 % #ecc279 1,67 L 40 % #b37a19 3,67 (juz braz) Pierwszy odcien, ktory przechodzi prog, nie jest juz bursztynem. I TU LEZY POWOD, dla ktorego Czerwien dziala: czerwony ZOSTAJE SOBA, gdy jest ciemny. Dlatego cieply akcent musial odejsc ku miedzi i terakocie (odcien 20 st.). ZBIEZNOSC Z WZORCEM wyszla blizsza, niz zakladalem: Czerwien (wzorzec) Zielen ciepla odleglosc odcienia 151,9 st. 149,2 st. nasycenie akcentu 56,6 % 55,0 % bialy napis na akcencie 5,53 5,85 To nie jest podobienstwo z grubsza - to ta sama konstrukcja przelozona na zielony fundament. Wersja jednobarwna miala odleglosc 11,0 st. CO WYPADLO Z PALETY PRZY TEJ KOREKCIE: * --pal-a-lemon #f9f871 - Cursor slusznie zauwazyl, ze tonika na gryfie to najwieksza plama koloru w calym narzedziu, wiec zolty zakreslacz wrocilby jako "nadmiar". Tonika stoi na akcencie. Token nigdy nie zostal uzyty. * --pal-a-green-mid #458958 - martwa strefa (bialy 4,22, ciemny 4,39, oba ponizej 4,5). Nie znalazl roli i nie ma po co czekac w pliku. * zielone akcenty --pal-a-green-600/500/200 - zastapione miedzia. Jasna zielen zostaje, ale ZMIENIA ROLE: z akcentu ciemnego motywu na --brand, czyli kolor tekstu i odnosnikow w ciemnym (dzis --pal-a-green-tekst-noc). ========================================================================== */ :root { /* --- Paleta A (domyslna): zielen --- */ /* Wprost od Adriana */ --pal-a-mint: #00b796; /* turkus - ZDJETY z akcentu 2026-09-01. Adrian: "mieta ma byc ograniczona". Zostalo mu dokladnie jedno zadanie: pierscien focus w ciemnym motywie. Na bieli unosi tylko ciemny napis (7,26), bialy 2,56. */ --pal-a-sage: #5d9d8a; /* szalwia - patrz nota o odcieniu 162 st. nizej */ --pal-a-mist: #f5f5f5; /* szarosc - neutral, tlo strony */ --pal-a-sand: #f3eada; /* piasek - cieple TLO; miedz nizej to jego ciemny brat */ /* Doliczone z odcienia akcentu (169 st.), bo paleta nie ma ciemnych tonow */ --pal-a-green-900: #053d33; /* pasek i stopka; bialy tekst 12,20 */ --pal-a-green-700: #075a4b; /* linki i obwodki; na tle strony 7,49 */ /* --- Zielen, ktora ROBI AKCJE -------------------------------------- Nazwy sa rolowe, nie liczbowe: skala liczbowa juz sie tu raz rozjechala, bo "800" wyszlo jasniejsze od "700". Rola czyta sie jednoznacznie. */ --pal-a-green-akcent: #147b44; /* przyciski; bialy napis 5,32, na tle strony 4,88, na piasku 4,46 */ --pal-a-green-akcent-mocny: #106538; /* najechanie - CIEMNIEJSZE, nie jasniejsze. Jasniejsze konczylo sie na 4,51, czyli tuz nad progiem. To daje 7,14. */ --pal-a-green-akcent-noc: #59c095; /* akcent CIEMNEGO motywu. #147b44 dawal na tle #0d1512 tylko 3,48 - powyzej progu, ale ciemna zielen na prawie czerni czyta sie ciezko. Tu 8,29, ciemny napis 7,66. */ --pal-a-green-akcent-noc-mocny: #6bc7a1; /* najechanie w ciemnym; ciemny napis 8,40 */ --pal-a-green-tekst-noc: #7cc0ac; /* --brand ciemnego motywu: na tle 8,82, na karcie 7,87 */ /* --- Bursztyn, ktory OZNACZA STAN ----------------------------------- */ --pal-a-amber: #e2a336; /* wprost od Adriana. Odcien 38 st., S 74,8 %, L 54,9 %. WYLACZNIE z ciemnym napisem (7,76; bialy daje 2,20) i WYLACZNIE tam, gdzie ma ciemne oparcie: pasek (5,53) albo kropka z obwodka. Na jasnym tle strony 2,02. */ /* Odcien 162 st., czyli PODJASNIONA SZALWIA Adriana, a nie 169 st. akcentu. Sama szalwia #5d9d8a nie uniesie napisu NIGDZIE w tym interfejsie: 3,16 na bieli, 2,89 na tle strony, 3,87 na pasku - wszedzie pod progiem 4,5. Wchodzi wiec do palety wylacznie przez ten podjasniony wariant. Gdyby kiedys byla potrzebna wprost, jedyna para, ktora przechodzi, to szalwia jako TLO pod ciemnym napisem (5,42) - czyli plakietka, nie tekst i nie kreska. */ --pal-a-sage-soft: #8fbdaf; /* podpis marki na pasku; na green-900 5,85 */ --pal-a-accent-hi: #00d3ac; /* najechanie; ciemny napis 8,89 */ --pal-a-border: #e7dcc6; /* obwodki w cieplym klimacie, patrz naglowek */ /* --- Paleta B: granat + czerwien --- */ /* Dwie wartosci sa tu POPRAWIONE wzgledem pierwotnej palety, bo nie przechodzily WCAG AA - i nie przechodzily juz wczesniej, tylko nikt tego nie policzyl: * czerwien #d2544a niesie bialy napis z kontrastem 4,11 (potrzeba 4,5), a ciemny z 4,16 - czyli ZADEN napis na niej nie byl czytelny wg AA. #b83f33 to najblizsza jej wartosc, ktora bialy napis unosi (5,53); * #6f8197 na granacie #12253d dawal 3,88 przy podpisie marki i linkach w stopce; #97a4b4 daje 6,10. Odcien w obu przypadkach zostaje ten sam - zmienila sie jasnosc. */ --pal-b-navy-900: #12253d; --pal-b-navy-700: #1c375b; --pal-b-navy-500: #97a4b4; --pal-b-paper: #f5f5f5; --pal-b-accent: #b83f33; --pal-b-accent-hi:#a83226; /* --- Skala neutralna wspolna dla obu palet --- */ --n-000: #ffffff; --n-050: #f7f9fc; --n-100: #eceff4; --n-200: #d8dee7; --n-400: #97a3b4; --n-600: #5a6675; --n-800: #2a3340; --n-900: #161c25; --ok: #2f8f5b; --warn: #b5761a; --error: #c0392b; /* --- Typografia --- */ --font-sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.2rem); /* --- Podglad palet w przelaczniku --- Kazda opcja podswietla sie WLASNYM kolorem struktury, a nie aktywnym akcentem. Adrian: "podswietlenie na opcji Zielen nie moze byc zolte czy brazowe, a zielone". Wczesniej pigulka brala `--accent`, wiec kontrolka pokazywala kolor, ktory akurat jest wlaczony, zamiast koloru, ktory wlaczy klikniecie. Te dwie wartosci sa CELOWO poza blokami palet: obie musza byc dostepne niezaleznie od tego, ktora paleta jest aktywna. */ --podglad-a: #075a4b; /* Zielen - bialy napis 8,16 */ --podglad-b: #1c375b; /* Granat - bialy napis 12,02 */ --podglad-napis: #ffffff; /* --- Rytm i ksztalt --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgb(5 61 51 / 8%), 0 2px 8px rgb(5 61 51 / 6%); --shadow-2: 0 4px 12px rgb(5 61 51 / 12%), 0 12px 32px rgb(5 61 51 / 10%); /* --- Role semantyczne: paleta A (zielen), motyw jasny --- */ --brand: var(--pal-a-green-700); --brand-deep: var(--pal-a-green-900); --brand-soft: var(--pal-a-sage-soft); --accent: var(--pal-a-green-akcent); --accent-hover: var(--pal-a-green-akcent-mocny); /* Aktywna pozycja menu ma WLASNY kolor, a nie `--accent`, i to jest wynik pomiaru. Panel boczny jest ciemny w OBU motywach, wiec pigulka musi byc jasna zawsze. Gdy akcent byl turkusem, wychodzil na pasku kontrast 4,77 i dzialalo przez przypadek. Po zmianie akcentu na ciemna zielen #1e634a spadlo do 1,71 - ponizej progu 3,0 dla elementu interfejsu, czyli "ktora pozycja jest aktywna" przestawalo byc widac. Przy okazji wyszlo, ze paleta B miala ten sam blad od poczatku (czerwien na granacie: 2,80) - poprawiona tym samym sposobem. */ --nav-active: var(--stan); /* bursztyn na pasku 5,53 */ --nav-active-ink: var(--stan-ink); /* ciemny napis na pigulce 7,76 */ --accent-ink: var(--n-000); /* bialy napis na zieleni akcji: 5,32 */ /* STAN - to, co jest wlaczone albo wyroznione, a nie to, co sie klika. Dzis dwa miejsca: aktywna pozycja menu i tonika na gryfie. Token jest wspolny, zeby "wyroznione" znaczylo w calej aplikacji to samo. */ --stan: var(--pal-a-amber); --stan-ink: var(--n-900); /* ciemny napis na bursztynie: 7,76 */ /* Warstwy: szarosc 0,913 (tlo) < biel 1,000 (karty). Powierzchnia WYNIOSLA nie ma juz wlasnego koloru - jest biala i wychodzi do przodu cieniem. Tak wyglada "ograniczyc sie w przejsciu tonalnym do #f3eada" (Adrian): jeden ton cieply zamiast dwoch, reszta hierarchii na jasnosci i cieniu. */ --bg: var(--pal-a-mist); /* #f5f5f5 - neutral */ --surface: var(--n-000); --surface-raised: var(--n-000); /* biel + cien, bez trzeciego tonu */ --surface-uwaga: var(--pal-a-sand); /* piasek - zajawki i ostrzezenia */ --border: var(--pal-a-border); --ink: var(--n-900); /* na bieli 16,68, na piasku 14,34 */ --ink-muted: var(--n-600); /* na bieli 5,70, na piasku 4,90 */ --ink-inverse: var(--n-000); --on-brand: var(--n-000); /* bialy na green-900: 12,20 */ /* Statusy planu zajec - osobna skala dla kazdego motywu (WCAG AA). */ --status-ok: #1f7a4d; --status-makeup: #8a5a11; --status-absent: #a4291c; --status-compensation: var(--pal-a-green-700); /* Obwodka focus musi miec 3:1 wzgledem tla. Pierscien zostaje ciemna zielenia: akcent jest teraz sam ciemny, wiec jako pierscien zlewalby sie z trescia. */ --focus-ring: var(--pal-a-green-700); color-scheme: light; } /* --- Paleta B, motyw jasny --- */ :root[data-palette="b"] { --brand: var(--pal-b-navy-700); --brand-deep: var(--pal-b-navy-900); --brand-soft: var(--pal-b-navy-500); --accent: var(--pal-b-accent); --accent-hover: var(--pal-b-accent-hi); /* Podjasniona czerwien wylacznie pod pigulke menu - sam akcent #b83f33 daje na granacie 2,80, czyli ponizej progu. Patrz nota przy palecie A. */ --nav-active: #d3695f; /* na granacie 4,39 */ --nav-active-ink: var(--n-900); /* ciemny napis na pigulce 5,26 */ --accent-ink: var(--n-000); --bg: var(--pal-b-paper); --surface-raised: var(--n-000); --surface-uwaga: var(--n-100); --border: var(--n-200); --status-compensation: var(--pal-b-navy-700); --focus-ring: var(--pal-b-navy-700); --shadow-1: 0 1px 2px rgb(18 37 61 / 8%), 0 2px 8px rgb(18 37 61 / 6%); --shadow-2: 0 4px 12px rgb(18 37 61 / 12%), 0 12px 32px rgb(18 37 61 / 10%); } /* ============================================================================ MOTYW CIEMNY Kazda paleta ma wlasne ciemne powierzchnie: zielona nie moze dostac granatowych, bo brand przestalby do nich pasowac. Stad cztery bloki zamiast dwoch - dwa dla motywu systemowego i dwa dla wyboru recznego. ========================================================================== */ /* --- Ciemny systemowy, paleta A (zielen) --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d1512; --surface: #16211d; --surface-raised: #1d2b26; --surface-uwaga: #2a241c; --border: #2c3f38; --ink: var(--n-050); /* na powierzchni 15,69 */ --ink-muted: #c9b99c; /* piaskowy, nie mietowy - 8,59 */ --ink-inverse: var(--n-900); /* --brand wraca do ZIELENI. Byl piaskiem, gdy cala paleta byla zielona i piasek stanowil przelamanie. Teraz przelamaniem jest miedziany akcent, wiec cieply --brand zabralby ciemnemu motywowi zielen calkiem - a to ona jest znakiem szkoly. Zielone jest to, co czytasz; miedziane to, co klikasz. */ --brand: var(--pal-a-green-tekst-noc); /* na tle 8,82, na karcie 7,87 */ /* Adrian: "napisy intensywnie mietowe maja byc tym kolorem" - 13,86 */ --brand-soft: var(--pal-a-sage-soft); /* 5,85 na pasku */ --on-brand: var(--n-000); /* Akcent ciemnego motywu MUSI byc jasny - #1e634a z motywu jasnego zniknalby na tle #0d1512 (kontrast 1,52). Zostaje w tej samej rodzinie odcienia (H 155), zeby ciemny motyw nie wracal do turkusu, ktory wlasnie zdjelismy w jasnym. */ --accent: var(--pal-a-green-akcent-noc); --accent-hover: var(--pal-a-green-akcent-noc-mocny); --accent-ink: var(--n-900); /* ciemny napis na jasnej zieleni: 7,66 */ /* STAN zostaje bursztynem takze w nocy: pasek jest ciemny w OBU motywach, wiec pigulka ma to samo oparcie i te sama liczbe (5,53). */ --status-ok: #5fd39b; --status-makeup: #f0b64f; --status-absent: #ff8f80; --status-compensation: #7ad9bf; --focus-ring: var(--pal-a-mint); /* jedyne miejsce turkusu po korekcie */ --shadow-1: 0 1px 2px rgb(0 0 0 / 40%); --shadow-2: 0 8px 28px rgb(0 0 0 / 45%); color-scheme: dark; } /* --- Ciemny systemowy, paleta B (granat) --- */ :root[data-palette="b"]:not([data-theme="light"]) { --bg: var(--n-900); --surface: #1b2431; --surface-raised: #212c3b; --surface-uwaga: #212c3b; --border: #33404f; --ink-muted: var(--n-400); --brand: #3f5c8c; --brand-soft: #7d93b8; --status-compensation: #8fb2e8; --focus-ring: #7d93b8; } } /* --- Ciemny wybrany recznie, paleta A (zielen) --- */ :root[data-theme="dark"] { --bg: #0d1512; --surface: #16211d; --surface-raised: #1d2b26; --surface-uwaga: #2a241c; --border: #2c3f38; --ink: var(--n-050); --ink-muted: #c9b99c; --ink-inverse: var(--n-900); /* --brand wraca do ZIELENI. Byl piaskiem, gdy cala paleta byla zielona i piasek stanowil przelamanie. Teraz przelamaniem jest miedziany akcent, wiec cieply --brand zabralby ciemnemu motywowi zielen calkiem - a to ona jest znakiem szkoly. Zielone jest to, co czytasz; miedziane to, co klikasz. */ --brand: var(--pal-a-green-tekst-noc); /* na tle 8,82, na karcie 7,87 */ --brand-soft: var(--pal-a-sage-soft); /* 5,85 na pasku */ --on-brand: var(--n-000); /* Akcent ciemnego motywu MUSI byc jasny - #1e634a z motywu jasnego zniknalby na tle #0d1512 (kontrast 1,52). Zostaje w tej samej rodzinie odcienia (H 155), zeby ciemny motyw nie wracal do turkusu, ktory wlasnie zdjelismy w jasnym. */ --accent: var(--pal-a-green-akcent-noc); --accent-hover: var(--pal-a-green-akcent-noc-mocny); --accent-ink: var(--n-900); /* ciemny napis na jasnej zieleni: 7,66 */ /* STAN zostaje bursztynem takze w nocy: pasek jest ciemny w OBU motywach, wiec pigulka ma to samo oparcie i te sama liczbe (5,53). */ --status-ok: #5fd39b; --status-makeup: #f0b64f; --status-absent: #ff8f80; --status-compensation: #7ad9bf; --focus-ring: var(--pal-a-mint); /* jedyne miejsce turkusu po korekcie */ --shadow-1: 0 1px 2px rgb(0 0 0 / 40%); --shadow-2: 0 8px 28px rgb(0 0 0 / 45%); color-scheme: dark; } /* --- Ciemny wybrany recznie, paleta B (granat) --- */ :root[data-theme="dark"][data-palette="b"] { --bg: var(--n-900); --surface: #1b2431; --surface-raised: #212c3b; --surface-uwaga: #212c3b; --border: #33404f; --ink-muted: var(--n-400); --brand: #3f5c8c; --brand-soft: #7d93b8; --status-compensation: #8fb2e8; --focus-ring: #7d93b8; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }