/* ============================================================================ 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, #edfdf8, #f3eada) 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 tego samego odcienia (169 st.), nie dobrane na oko. Kazda para kolorow uzywana w interfejsie zostala policzona pod WCAG AA - wyniki w komentarzach przy rolach. ========================================================================== */ :root { /* --- Paleta A (domyslna): zielen --- */ /* Wprost od Adriana */ --pal-a-accent: #00b796; /* zielen wiodaca - przyciski */ --pal-a-sage: #5d9d8a; /* szalwia */ --pal-a-mist: #f5f5f5; /* szarosc */ --pal-a-paper: #edfdf8; /* mieta - tlo strony */ --pal-a-sand: #f3eada; /* piasek - powierzchnia ciepla */ /* Doliczone z odcienia 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 miecie 7,78 */ --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: #cfe3dc; /* obwodki w zielonym klimacie */ /* --- 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); /* --- 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-accent); --accent-hover: var(--pal-a-accent-hi); --accent-ink: var(--n-900); /* ciemny napis na zieleni: 6,69 */ /* ZMIANA 2026-08-31 (Adrian): "ogranicz #edfdf8, wyeksponuj #f5f5f5 - jest zbyt mietowo i pastelowo". Tlem strony jest wiec szarosc, dokladnie ta sama co w palecie Czerwien. Mieta NIE znika - schodzi do roli powierzchni wynioslej, ktorej uzywaja tylko dwa komponenty (przelacznik i ramka czytnika PDF), wiec pojawia sie punktowo, a nie na calym ekranie. */ --bg: var(--pal-a-mist); /* #f5f5f5 */ --surface: var(--n-000); --surface-raised: var(--pal-a-paper); /* mieta - punktowo */ --surface-uwaga: var(--pal-a-sand); /* piasek - zajawki i ostrzezenia */ --border: var(--pal-a-border); --ink: var(--n-900); /* na miecie 16,31 */ --ink-muted: var(--n-600); /* na miecie 5,57 */ --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. Akcent #00b796 daje na miecie zaledwie 2,4 - dlatego pierscien jest ciemna zielenia (7,78), nie akcentem. */ --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); --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: #f3eada; /* Adrian: "napisy intensywnie mietowe maja byc tym kolorem" - 13,86 */ --brand-soft: #d8ccb6; /* 10,42 na ciemnej zieleni paska */ --on-brand: var(--n-000); --status-ok: #5fd39b; --status-makeup: #f0b64f; --status-absent: #ff8f80; --status-compensation: #7ad9bf; --focus-ring: #3fbfa2; --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: #f3eada; --brand-soft: #d8ccb6; --on-brand: var(--n-000); --status-ok: #5fd39b; --status-makeup: #f0b64f; --status-absent: #ff8f80; --status-compensation: #7ad9bf; --focus-ring: #3fbfa2; --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; } }