/* * TATRY PLANER — tokeny design systemu * ==================================== * * Jedyne miejsce, w którym wolno zapisać wartość koloru, cienia, * promienia czy kroju. W komponentach — wyłącznie var(--token). * * Źródło: brand book v2 (wydanie 02) + Design Blueprint Suite. * Zmiana tokena jest zmianą marki — aktualizuj brand booka razem z tym plikiem. * * Nowy kolor dodajesz w DWÓCH miejscach: :root oraz .dark. * Dopóki nie ma go w obu, nie istnieje. * * SPIS: * 1. Kolory marki 5. Cienie i gradienty * 2. Semantyka interfejsu 6. Typografia * 3. Semantyka szlaków 7. Przestrzeń i gęstość * 4. Semantyka danych 8. Ruch * 9. Tryb ciemny (przygotowany, nieaktywny) */ :root { /* --------------------------------------------------------------- 1. KOLORY MARKI — stałe, niezależne od trybu Proporcje wg brand booka: 60 sand · 22 forest · 12 beige · 6 sunrise --------------------------------------------------------------- */ --forest: oklch(0.32 0.043 158); /* #1E3B31 — kolor główny, CTA */ --forest-deep: oklch(0.24 0.036 160); /* #14261F — start gradientu */ --moss: oklch(0.52 0.072 152); /* #4B7C5B — akcenty, ikony */ --sand: oklch(0.965 0.014 85); /* #F7F3EA — papier mapy */ --beige: oklch(0.915 0.026 84); /* #E9DFC9 — drugi plan */ --stone: oklch(0.68 0.02 155); /* #9AA79C — obramowania */ --sunrise: oklch(0.7 0.12 55); /* #D9883F — akcent ciepły */ /* Twoja pozycja na mapie. Do 30.08.2026 był tu błękit i ten plik tłumaczył, że to jedyne miejsce w palecie, w którym wolno go użyć. Decyzja się zmieniła: kropka pozycji wchodzi do rodziny marki i jest jasną zielenią. Czego to kosztuje i jak się broni: zieleń dzieli teraz odcień z siecią szlaków (`--forest`, 0.32) i z obwódką trasy, więc nie odróżnia się od nich barwą. Trzyma się trzema rzeczami naraz — JASNOŚCIĄ (0.72 wobec 0.32 lasu i 0.52 mchu), piaskowym pierścieniem dookoła i ciemnym włosem na jego zewnętrznej krawędzi. Błękit robił to samo bez pomocy; jeśli kiedykolwiek kropka zacznie ginąć na zacienionym stoku, to jest pierwsze miejsce do sprawdzenia. */ --pozycja: oklch(0.72 0.16 148); /* „jesteś tutaj" */ /* Stożek patrzenia — ciemniejszy od rdzenia, bo rozlewa się na dużej powierzchni i w jasności rdzenia zamieniłby się w mgłę nad mapą. */ --pozycja-stozek: oklch(0.6 0.15 148); /* --------------------------------------------------------------- 2. SEMANTYKA INTERFEJSU — tryb jasny --------------------------------------------------------------- */ --background: oklch(0.978 0.011 86); --foreground: oklch(0.24 0.028 160); --card: oklch(0.995 0.005 86); --card-foreground: oklch(0.24 0.028 160); --popover: oklch(0.995 0.005 86); --popover-foreground: oklch(0.24 0.028 160); --primary: oklch(0.32 0.043 158); --primary-foreground: oklch(0.975 0.012 86); --secondary: oklch(0.925 0.024 84); --secondary-foreground: oklch(0.3 0.038 158); --muted: oklch(0.94 0.017 85); --muted-foreground: oklch(0.5 0.023 158); --accent: oklch(0.9 0.036 145); /* jasna zieleń: hover, zaznaczenie */ --accent-foreground: oklch(0.28 0.04 158); --accent-soft: oklch(0.964 0.009 161); /* nasze: bardzo jasne tło wyboru */ /* --destructive jest POWIERZCHNIĄ, nie kolorem tekstu. Jeden token nie obsłuży obu ról: w trybie ciemnym nie da się dobrać jasności, przy której i biały tekst na nim, i on sam jako tekst na tle alarmu przejdą próg — sprawdzone, każda wartość psuje jedną stronę. Do tekstu jest --alert-foreground. */ --destructive: oklch(0.51 0.166 26); --destructive-foreground: oklch(0.975 0.012 86); /* Dwa różne zadania, dwie różne wartości. `--border` rysuje linie rozdzielające wiersze — to dekoracja i wolno jej być cichą. `--border-strong` obrysowuje kontrolki i musi dobić do 3:1 wobec tła, bo pole tekstowe rozpoznaje się właśnie po nim: jego wypełnienie różni się od tła strony o 1.12:1, czyli praktycznie wcale. Poprzednia wartość dawała 1.64:1 i pole zlewało się z panelem w słońcu. */ --border: oklch(0.876 0.023 85); --border-strong: oklch(0.65 0.025 85); --input: oklch(0.876 0.023 85); --ring: oklch(0.52 0.072 152); /* Komunikaty — rozszerzenie DS. Brand book mówi: ciepły akcent służy wyłącznie ostrzeżeniom i trudności. Stąd trzy stopnie, nie jeden: notice (piaskowy, do wiadomości) → warn (sunrise, uwaga) → alert (czerwony, zakaz i zagrożenie). */ --notice: oklch(0.98 0.022 87); --notice-border: oklch(0.91 0.052 87); --notice-foreground: oklch(0.493 0.094 84); --warn: oklch(0.953 0.027 64); --warn-border: oklch(0.9 0.05 60); --warn-foreground: oklch(0.535 0.174 38); --alert: oklch(0.972 0.011 17); --alert-border: oklch(0.897 0.032 18); --alert-foreground: oklch(0.5 0.15 25); --info: oklch(0.97 0.01 248); --info-border: oklch(0.909 0.023 246); --info-foreground: oklch(0.45 0.11 251); /* --------------------------------------------------------------- 3. SEMANTYKA SZLAKÓW UWAGA: to jest TRUDNOŚĆ, nie kolor oznakowania w terenie. Kolory znaków (czerwony, niebieski, zielony, żółty, czarny) żyją w js/config.js i NIGDY nie są tokenami marki — to fakt ze świata, nie decyzja projektowa. Trudności są cztery (0–3), zamknięcie to osobny stan. Jasność jest policzona, nie dobrana okiem — każda para daje min. 4.8:1. Wartości z DS nie przechodziły: warianty *-soft dawały 4.14:1 dla średniej i 4.38:1 dla eksperta, a warianty nasycone 3.28:1 dla łatwej i 3.41:1 dla zamkniętej z białym tekstem. Plakietki mają 11 px, więc próg to 4.5:1. --------------------------------------------------------------- */ --trail-easy: oklch(0.525 0.11 150); --trail-easy-foreground: oklch(0.98 0.01 86); --trail-easy-soft: oklch(0.954 0.02 155); --trail-easy-soft-foreground: oklch(0.505 0.119 153); --trail-medium: oklch(0.75 0.135 78); --trail-medium-foreground: oklch(0.26 0.05 70); --trail-medium-soft: oklch(0.97 0.029 83); --trail-medium-soft-foreground: oklch(0.535 0.122 69); --trail-hard: oklch(0.55 0.16 32); --trail-hard-foreground: oklch(0.98 0.01 86); --trail-hard-soft: oklch(0.953 0.027 64); --trail-hard-soft-foreground: oklch(0.535 0.174 38); --trail-expert: oklch(0.5 0.19 27); /* nasze: czwarty stopień (T4+) */ --trail-expert-foreground: oklch(0.98 0.01 86); --trail-expert-soft: oklch(0.93 0.032 18); --trail-expert-soft-foreground: oklch(0.52 0.195 27); --trail-closed: oklch(0.535 0.018 155); --trail-closed-foreground: oklch(0.98 0.01 86); /* --------------------------------------------------------------- 4. SEMANTYKA DANYCH — profil wysokości, statystyki --------------------------------------------------------------- */ --ascent: oklch(0.539 0.193 6); /* podejście ↑ */ --descent: oklch(0.535 0.159 251); /* zejście ↓ */ --waypoint-start: oklch(0.32 0.043 158); --waypoint-end: oklch(0.539 0.193 6); --region-fill: oklch(0.911 0.017 157); /* mapa obszarów w kreatorze */ --region-fill-hover: oklch(0.862 0.03 158); --region-fill-past: oklch(0.8 0.038 161); /* --------------------------------------------------------------- ZNACZNIKI I WARSTWY MAPY Mapa mówi trzecim słownikiem barw i trzeba to powiedzieć wprost. Pierwszy to paleta marki — interfejs. Drugi to kolory oznakowania szlaków w terenie (js/config.js), których nie wolno tknąć. Trzeci to kategorie terenowe poniżej: cel, rzeźba, woda, wejście. Powód, dla którego marka tu nie wystarcza: paleta ma jedną zieleń i jeden ciepły akcent zarezerwowany dla ostrzeżeń, a mapa musi odróżnić schronisko od szczytu, wodę od parkingu i wszystko to od czerwonego szlaku. Odcienie są dobrane w rodzinie palety (niska chroma, hue blisko marki), ale to osobny słownik. Kolory trafiają do MapLibre przez js/tokeny.js, bo biblioteka nie parsuje oklch. --------------------------------------------------------------- */ --marker-cel: oklch(0.38 0.055 158); /* schronisko — po co się idzie */ --marker-teren: oklch(0.46 0.06 62); /* szczyt, przełęcz — rzeźba */ --marker-woda: oklch(0.5 0.09 235); /* staw, źródło, wodospad */ --marker-wejscie: oklch(0.5 0.045 250); /* parking, przystanek */ --marker-orientacja: oklch(0.42 0.03 158); /* rozdroże, punkt widokowy */ --marker-wnetrze: oklch(0.36 0.015 250); /* jaskinia */ --marker-wezel: oklch(0.6 0.015 250); /* bezimienny węzeł grafu */ /* Trasa użytkownika na mapie i w profilu — musi odcinać się od każdego koloru oznakowania, więc bierze magentę, której w znakach nie ma. */ --trasa: oklch(0.539 0.193 6); --marker-start: oklch(0.32 0.043 158); /* punkt A trasy */ --marker-etykieta: oklch(0.98 0.01 86); /* litera w punkcie trasy */ /* Punkt DOTKNIĘTY, czekający na decyzję („co z nim zrobić"). Zieleń, i to jaśniejsza niż cokolwiek innego na mapie, bo ma znaczyć „tutaj, teraz" — magenta trasy jest już zajęta przez punkty ustalone, a ciemne zielenie kategorii (`--marker-cel`, `--marker-start`) giną na stoku. Kropka pulsuje, więc kolor musi wytrzymać rozjaśnienie do przezroczystości. */ --marker-oczekujacy: oklch(0.62 0.175 148); /* Części znaczników, które nie są kolorem kategorii: spód krążka, obrys i pole tarczy ostrzegawczej. Osobne tokeny, bo znacznik leży na mapie, a mapa nie przewraca się razem z interfejsem — patrz uwaga niżej. */ --marker-tlo: oklch(0.995 0.005 86); --marker-obrys: oklch(0.24 0.028 160); --marker-alarm: oklch(0.51 0.166 26); --marker-alarm-tekst: oklch(0.98 0.01 86); /* Cień pod znacznikiem klikalnym. Odkleja węzeł grafu od punktów OSM, które od tej pory są tylko kropkami — sam rozmiar nie wystarczał tam, gdzie pod spodem leży jasny stok albo gęsta poziomica. */ --marker-cien: oklch(0.24 0.028 160 / 0.38); /* CAŁA ta sekcja jest niezależna od motywu i to jest decyzja, nie przeoczenie. Podkład mapy to zdjęcie świata, nie powierzchnia interfejsu: rastrowe kafle OSM są jasne o każdej porze, a odwracanie ich filtrem zamienia las w fiolet i psuje czytelność w terenie. Skoro podkład zostaje jasny, znaczniki i etykiety na nim też muszą zostać jasne — inaczej w trybie ciemnym dostalibyśmy czarne krążki na zielonej mapie. Dlatego żaden token z tej sekcji nie ma odpowiednika w bloku .dark i żaden kolor z palety interfejsu nie ma prawa trafić na mapę. Halo pod etykietami: zawsze jasne, bo leży na podkładzie mapy. */ --mapa-halo: oklch(1 0 0); --mapa-etykieta: oklch(0.28 0.028 160); /* NAZWY TERENOWE — doliny, żleby, mikrotoponimy i wody na podkładzie offline. Osobne od `--mapa-etykieta` i celowo słabsze. Etykieta oznacza MIEJSCE, w które można iść: schronisko, szczyt, rozdroże. Nazwa terenowa oznacza OBSZAR, w którym się jest — i to jest inna rola w czytaniu mapy. Gdyby obie miały tę samą siłę, „Nadspady" krzyczałoby tak samo jak „Morskie Oko", a mapa przestałaby mieć pierwszy plan. Stąd ten sam odcień, tylko jaśniejszy i z mniejszym nasyceniem: nazwy terenowe czyta się wtedy, gdy się ich szuka. Woda dostaje własną barwę, bo jako jedyna nazywa coś, co ma na mapie swój kolor — napis w barwie stawu zrasta się z nim w jedną informację, zamiast leżeć na nim jako druga. */ --mapa-nazwa: oklch(0.44 0.02 150); --mapa-nazwa-woda: oklch(0.5 0.055 235); /* Cień pod wiązką szlaków. Zastąpił białą otoczkę, która czytała się dobrze nad pojedynczym szlakiem, ale w węzłach sieci — pod Murowańcem, w Kuźnicach — zlewała się w jasną plamę szerszą niż same szlaki i to ona, a nie kolory znakowania, rządziła wtedy rysunkiem. Cień robi to samo zadanie inaczej: nie wstawia trzeciej barwy między szlak a podkład, tylko odkleja szlak od stoku różnicą jasności. Rozmyty i słaby, bo ma być widoczny dopiero wtedy, gdy się go szuka. Ta sama rodzina co `--marker-cien` — jedno źródło światła na całej mapie. */ --mapa-cien: oklch(0.24 0.028 160 / 0.42); /* Granica państwowa — pas i kreska. Barwa neutralna i przygaszona, bo granica ma być rozpoznawalna, a nie ważna. Czerń odpada, choć papierowe mapy jej używają: czarny jest u nas BARWĄ ZNAKOWANIA szlaku i granica narysowana czernią czytałaby się jak jeszcze jeden szlak, tylko dziwnie kreskowany. Stąd ciemna szarozieleń rzeźby — z tej samej rodziny co `--mapa-etykieta`, o ćwierć tonu ciemniej. Pas jest ledwie widoczny z rozmysłem: przy tej alfie na jasnym stoku widać go dopiero wtedy, gdy się patrzy, a na gęstej poziomicowej stromiźnie nie dokłada trzeciego rysunku obok szlaku i rzeźby. */ --mapa-granica: oklch(0.3 0.022 160 / 0.9); --mapa-granica-pas: oklch(0.44 0.05 150 / 0.2); /* Dojazd: drogi kołowe i place parkingowe na podkładzie offline. Biała jezdnia w szarej obwódce, czyli rysunek z map topograficznych — i wybrany dokładnie dlatego, że NIE JEST kolorem. Szlaki na tej mapie są treścią i mają cztery barwy znakowania; piąta, choćby najcichsza, kazałaby oku pytać, co znaczy. Biel z obwódką czyta się jako droga bez pytania i znika, gdy się patrzy na szlak. Parking dostaje stonowaną zieleń kamienia, a nie niebieski OSM-a: niebieski jest u nas kolorem szlaku i plama w tej barwie pod znacznikiem czytałaby się jak jego rozlanie. */ /* Ulica dojściowa — droga, po której da się dojść pod szlak, wpięta do trasy jako pierwszy jej odcinek. Szarość rzeźby, nie barwa znakowania: to nie jest szlak i ma się nie dopominać o uwagę. Ciemniejsza od `--mapa-droga`, bo tamta jest podkładem, a ta jest klikalna. */ --mapa-ulica: oklch(0.58 0.012 250); --mapa-droga: oklch(0.995 0.003 85); --mapa-droga-obwodka: oklch(0.6 0.018 85); --mapa-parking: oklch(0.72 0.024 155 / 0.34); --mapa-parking-obrys: oklch(0.52 0.03 155); /* Ograniczenia na szlakach. Leżą na podkładzie, więc tak jak reszta tej sekcji nie mają odpowiednika w bloku .dark — zamknięty szlak ma wyglądać tak samo w obu motywach, bo mapa pod spodem się nie zmienia. */ --mapa-zamkniecie: oklch(0.52 0.19 27); --mapa-utrudnienie: oklch(0.66 0.16 62); /* Nakładka opadu — cztery stopnie, nie ciągła tęcza. Ciągła skala obiecuje dokładność, której siatka 3 km nie ma, a w słońcu na ekranie telefonu i tak jej nie odczytasz. Cztery plamy odpowiadają na pytanie, które się naprawdę zadaje: mocniej czy słabiej niż tam. Błękit przechodzący w fiolet, bo cała reszta tej mapy jest ziemista: `--forest`, `--sunrise` i `--sand` malują trasę i znaczniki, a opad ma się z nimi rozchodzić bez pytania „co to znaczy". Alfa rośnie razem ze stopniem — to ona, a nie sam odcień, niesie „mocniej", bo przez słabszy opad ma być widać teren pod spodem. Jak reszta tej sekcji: BEZ ODPOWIEDNIKÓW W BLOKU `.dark`. Podkład mapy nie zmienia się z motywem, więc to, co na nim leży, też nie. */ --mapa-opad-1: oklch(0.72 0.105 240 / 0.3); --mapa-opad-2: oklch(0.62 0.15 255 / 0.44); --mapa-opad-3: oklch(0.52 0.185 282 / 0.57); --mapa-opad-4: oklch(0.44 0.2 305 / 0.7); /* Nakładka pełnoekranowa (lightbox) — celowo ciemna w obu trybach */ --scrim: oklch(0.19 0.008 256 / 0.92); --scrim-surface: oklch(0.296 0.008 256); --scrim-foreground: oklch(0.98 0 0); --scrim-foreground-dim: oklch(0.849 0.01 253); /* --------------------------------------------------------------- 5. PROMIENIE, CIENIE, GRADIENTY Skala liczona od --radius (12 px), jak w DS. Brand book podaje ją w zaokrągleniu „8 / 12 / 16 / 24" — źródłem jest kod, nie PDF. --------------------------------------------------------------- */ --radius: 12px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-pill: 999px; --shadow-soft: 0 1px 2px oklch(0.24 0.03 160 / 0.05), 0 2px 8px oklch(0.24 0.03 160 / 0.04); --shadow-raised: 0 2px 4px oklch(0.24 0.03 160 / 0.06), 0 8px 24px oklch(0.24 0.03 160 / 0.07); --shadow-ridge: 0 12px 40px -12px oklch(0.24 0.03 160 / 0.22); --shadow-press: inset 0 1px 0 oklch(1 0 0 / 0.12), 0 1px 2px oklch(0.24 0.03 160 / 0.18); /* Gradient „grzbietu górskiego" — jedyny dozwolony efekt (brand book s. 2) */ --gradient-forest: linear-gradient(150deg, var(--forest-deep) 0%, var(--forest) 52%, var(--moss) 100%); --gradient-sunrise: linear-gradient(150deg, oklch(0.78 0.13 72) 0%, var(--sunrise) 58%, oklch(0.64 0.14 42) 100%); /* --------------------------------------------------------------- 6. TYPOGRAFIA Nagłówki Space Grotesk · treść Lexend · dane JetBrains Mono. Odejście od brand booka, świadome: Young Serif jest krojem wystawowym, pokazywanym tam w 56–72 px. Nasze nagłówki mają 15–19 px w panelu 360 px, czyli dokładnie ten zakres, w którym grube szeryfy i wąskie prześwity się zamulają. Space Grotesk ma wysoki x-height i otwarte litery, a Lexend był projektowany wprost pod czytelność ciągłego tekstu. Kroje hostujemy lokalnie — scripts/fetch_fonts.py. --------------------------------------------------------------- */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Wordmark logo zostaje przy szeryfie z brand booka. Znak jest jedynym miejscem, gdzie krój wystawowy występuje w rozmiarze, do którego był projektowany — i jedynym, w którym niesie przewodnikowy ton marki. */ --font-wordmark: "Young Serif", ui-serif, Georgia, "Times New Roman", serif; --tracking-label: 0.16em; /* etykiety w kapitalikach */ --tracking-tight: -0.015em; /* nagłówki */ /* --------------------------------------------------------------- 7. PRZESTRZEŃ I GĘSTOŚĆ Skala 4 px. Dwie gęstości: compact (panel, listy, mapa) i komfort (treść, mobile) — patrz .komfort niżej. --------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* Gęstość compact — domyślna w panelu */ --text-base: 13.5px; --text-sm: 12.5px; --text-xs: 11px; --text-lg: 16px; --leading: 1.45; --pad-x: 18px; --pad-y: 12px; --gap: 10px; --control-h: 34px; --tap-min: 44px; /* minimalny cel dotykowy — nigdy mniej */ /* 400, nie 360: przy węższym panelu trzy pastylki danych (czas, dystans, przewyższenie) nie mieściły się w wierszu karty trasy i łamały się w drugą linię — w 72 kartach ze 130. Szersza kolumna łapie też więcej tekstu wszędzie indziej, więc listy przewija się krócej. */ --panel-w: 400px; --content-max: 1120px; /* --------------------------------------------------------------- 8. RUCH — powolny i krótki (brand book s. 6) --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.25, 1, 0.4, 1); --dur-fast: 160ms; --dur-base: 200ms; --dur-slow: 240ms; } /* Na urządzeniach dotykowych gęstość compact nie może zjeść celu dotykowego. Brand book stawia twarde 44 × 44 px i to wygrywa z upodobaniem do ciasnego panelu. */ @media (pointer: coarse) { :root { --control-h: var(--tap-min); } } /* Gęstość komfortowa — pełna skala z brand booka. Do treści czytanych (przewodnik, karty tras) i do mobile. */ .komfort { --text-base: 16px; --text-sm: 14px; --text-xs: 12px; --text-lg: 20px; --leading: 1.6; --pad-x: 24px; --pad-y: 16px; --gap: 16px; --control-h: 44px; } /* --------------------------------------------------------------- 9. TRYB CIEMNY — przygotowany, jeszcze nieaktywny. Brakuje ciemnych wersji: podkładu MapLibre, profilu SVG i markerów rysowanych na canvasie (js/icons.js). Przełącznik dokładamy dopiero, gdy te trzy będą gotowe. --------------------------------------------------------------- */ .dark { --background: oklch(0.19 0.024 160); --foreground: oklch(0.94 0.012 86); --card: oklch(0.235 0.028 160); --card-foreground: oklch(0.94 0.012 86); --popover: oklch(0.235 0.028 160); --popover-foreground: oklch(0.94 0.012 86); --primary: oklch(0.78 0.09 148); --primary-foreground: oklch(0.2 0.03 160); --secondary: oklch(0.29 0.028 160); --secondary-foreground: oklch(0.94 0.012 86); --muted: oklch(0.28 0.024 160); --muted-foreground: oklch(0.72 0.02 150); --accent: oklch(0.34 0.045 155); --accent-foreground: oklch(0.94 0.012 86); --accent-soft: oklch(0.27 0.03 158); --destructive: oklch(0.55 0.17 27); --destructive-foreground: oklch(0.97 0.01 86); --border: oklch(0.94 0.012 86 / 0.14); --border-strong: oklch(0.94 0.012 86 / 0.24); --input: oklch(0.94 0.012 86 / 0.18); --ring: oklch(0.7 0.09 150); --sand: oklch(0.9 0.02 85); --beige: oklch(0.8 0.03 84); --stone: oklch(0.6 0.02 155); --notice: oklch(0.3 0.04 87); --notice-border: oklch(0.4 0.06 87); --notice-foreground: oklch(0.85 0.08 87); --warn: oklch(0.31 0.06 38); --warn-border: oklch(0.41 0.08 38); --warn-foreground: oklch(0.84 0.11 45); --alert: oklch(0.28 0.05 20); --alert-border: oklch(0.38 0.08 20); --alert-foreground: oklch(0.85 0.09 22); --info: oklch(0.27 0.04 248); --info-border: oklch(0.37 0.06 248); --info-foreground: oklch(0.82 0.08 248); --trail-easy: oklch(0.72 0.12 150); --trail-easy-foreground: oklch(0.2 0.03 160); --trail-easy-soft: oklch(0.3 0.05 152); --trail-easy-soft-foreground: oklch(0.82 0.1 150); --trail-medium: oklch(0.8 0.13 80); --trail-medium-foreground: oklch(0.24 0.05 70); --trail-medium-soft: oklch(0.32 0.05 78); --trail-medium-soft-foreground: oklch(0.86 0.1 82); --trail-hard: oklch(0.66 0.16 32); --trail-hard-foreground: oklch(0.2 0.03 160); --trail-hard-soft: oklch(0.31 0.06 38); --trail-hard-soft-foreground: oklch(0.82 0.11 45); --trail-expert: oklch(0.62 0.19 27); --trail-expert-foreground: oklch(0.2 0.03 160); --trail-expert-soft: oklch(0.3 0.07 25); --trail-expert-soft-foreground: oklch(0.82 0.12 25); --trail-closed: oklch(0.52 0.015 155); --trail-closed-foreground: oklch(0.96 0.01 86); --ascent: oklch(0.68 0.17 8); --descent: oklch(0.7 0.13 250); --waypoint-start: oklch(0.78 0.09 148); --waypoint-end: oklch(0.68 0.17 8); --region-fill: oklch(0.34 0.04 157); --region-fill-hover: oklch(0.42 0.05 158); --region-fill-past: oklch(0.3 0.03 161); --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 8px oklch(0 0 0 / 0.24); --shadow-raised: 0 2px 4px oklch(0 0 0 / 0.32), 0 8px 24px oklch(0 0 0 / 0.3); --shadow-ridge: 0 12px 40px -12px oklch(0 0 0 / 0.55); --shadow-press: inset 0 1px 0 oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.4); --gradient-forest: linear-gradient(150deg, var(--moss) 0%, oklch(0.72 0.09 148) 55%, oklch(0.84 0.08 145) 100%); --gradient-sunrise: linear-gradient(150deg, oklch(0.82 0.12 74) 0%, oklch(0.74 0.13 55) 58%, oklch(0.66 0.14 40) 100%); } /* --------------------------------------------------------------- 10. ZEGAREK — przełożenie DS na ekran zegarka (decyzje 2026-09-13) Działa RAZEM z .dark (class="dark zegarek"): zegarek ma wyłącznie ciemny grunt. Na zegarku wartości trafiają do SwiftUI lustrzanym plikiem — ten blok jest źródłem, a nie opisem tego, co tam jest. Wzór ekranów: design/zegarek/ui-v1.html. Trzy odejścia od reszty tego pliku, każde z powodem (DESIGN.md, „Zegarek"): 1. Ciepły akcent jest KOLOREM AKTYWNOŚCI (pierścień, paski, akcja główna), tak jak w apce mobilnej i w referencji Lovable. Uwagi przestają być pomarańczowe: informacyjne idą w --notice, pilne w --alert — inaczej „Wróć na szlak" zlewa się z pierścieniem postępu. 2. Blok nie ma pary w :root — nie ma zegarka w trybie jasnym. 3. Ambient ma tło czysto czarne, nie gradient: na OLED-zie czarny piksel jest zgaszony, a ekran oszczędny ma być prawie cały zgaszony (bateria, wypalanie — ZEGAREK.md, „Ambient"). --------------------------------------------------------------- */ .zegarek { /* Tło: czerń u góry (pasek godziny), ciemna zieleń marki u dołu. Dół to --background trybu ciemnego — ta sama zieleń co grunt apki. */ --zegarek-tlo: linear-gradient(180deg, oklch(0 0 0) 0%, oklch(0 0 0) 30%, oklch(0.19 0.024 160) 100%); --zegarek-tlo-ambient: oklch(0 0 0); /* Czerń do obrysów i wycięć — gradientu nie da się użyć jako koloru. */ --zegarek-czern: oklch(0 0 0); /* Aktywność: postęp, pasek, tytuł ekranu, kropka „trwa". */ --zegarek-aktywnosc: var(--sunrise); --zegarek-aktywnosc-tor: oklch(1 0 0 / 0.14); --zegarek-aktywnosc-pauza: var(--stone); /* Dwa style przycisków, jak w apce: .btn-summit i .btn-primary. */ --zegarek-akcja: var(--gradient-sunrise); /* Rozpocznij, Wznów, numer alarmowy */ --zegarek-akcja-tekst: var(--forest-deep); --zegarek-przycisk: linear-gradient(150deg, var(--forest-deep) 0%, var(--forest) 100%); --zegarek-przycisk-tekst: var(--sand); --zegarek-przycisk-obrys: oklch(1 0 0 / 0.1); /* Kafel listy: ciemna zieleń prześwitująca przez gradient tła. */ --zegarek-kafel: color-mix(in oklch, var(--forest) 55%, transparent); --zegarek-kafel-obrys: oklch(1 0 0 / 0.08); /* Uwagi — dwa stopnie, bez pomarańczu (patrz punkt 1). */ --zegarek-info: var(--notice-foreground); --zegarek-info-tlo: var(--notice); --zegarek-pilne: var(--alert-foreground); --zegarek-pilne-tlo: var(--alert); /* Typografia: hybryda — liczby i nagłówki w kroju marki, tekst systemowy (SF Compact trzyma pomiar nazw krótkich z W1.3). Skala −20% z podłogą 12 pt: minimum czytelności watchOS z Human Interface Guidelines. Rozmiar na zegarku = max(podłoga, rozmiar bazowy × skala), liczony względem stylu Dynamic Type, żeby powiększenie tekstu w ustawieniach dalej działało. */ --zegarek-kroj-liczby: var(--font-display); --zegarek-kroj-naglowek: var(--font-display); --zegarek-kroj-tekst: -apple-system, "SF Compact Text", "SF Pro Text", system-ui, sans-serif; --zegarek-kroj-wspolrzedne: var(--font-mono); --zegarek-skala: 0.8; --zegarek-podloga: 12; /* Ikony: zestaw DS (sprite w apka.html / planer.html), nie SF Symbols — ten sam posłuży Wear OS. Obrys z tokenu, nie z symbolu: DS rysuje 1,6 na siatce 24, co przy 16–18 pt daje linię poniżej 1,2 pt. Do decyzji: 1,6 czy 2. */ --zegarek-ikona-obrys: 1.6; }