/* ============================================================================= Tokeny wizualne — role kolorów, typografia, odstępy, cienie, ruch, warstwy System designu automatyzacji · GOTOWIEC do KOPIUJ-WKLEJ. Wgrywaj RAZEM z `background.css`: background.css -> tło (wash) + kolory marki tokens.css -> powierzchnie, tekst, obrysy, statusy, skale (ten plik) ----------------------------------------------------------------------------- IDEA: zamiast wpisywać wartości „na sztywno”, używamy RÓL i SKAL. Każda rola koloru ma jedną wartość dla light i jedną dla dark. Powierzchnie są kryjące/ jaśniejsze od tła, więc „unoszą się” nad washem i tekst na nich jest czytelny. ZASADA: każdy kolor tła/tekstu oraz każda wartość liczbowa (odstęp, rozmiar fontu, cień, czas ruchu, warstwa z-index) w automatyzacji pochodzi z JEDNEGO z tokenów tego pliku. Nie wpisuj surowych hexów, palety narzędzia (np. slate-900) ani liczb z palca tam, gdzie jest token. Statusy (błąd/sukces/uwaga/info) to OSOBNA, systemowa grupa (§2.8) — nie mieszaj ich z rolami tekstu ani z kolorami marki („zielony = sukces” jest ZAKAZANE, patrz ST-1). JEDYNA rzecz do dopasowania: selektor trybu ciemnego (jak w background.css). Domyślnie [data-theme="dark"]. WARTOŚCI zostają 1:1. ============================================================================= */ :root { --surface: #ffffff; /* karty, panele */ --surface-sunken: #eef2f8; /* pola formularza, bloki wtórne */ --border: #e2e7ee; /* cienkie linie, obrysy (hairline) */ --shell-hairline: rgba(11, 13, 18, 0.16); /* hairline POWŁOKI (header/sidebar) nad washem - wyraźnie ciemniejszy niż --border, bo #e2e7ee (i słabszy tint) ginie na jasnym washu (L-1) */ --nav-active-bg: #ffffff; /* aktywna pozycja nawigacji (widoczna na jasnym washu) */ --text: #0b0d12; /* nagłówki, treść główna */ --text-muted: #515b69; /* opisy, podpisy */ --text-subtle: #828c99; /* ledwo ważne detale */ /* Przycisk primary = ODWRÓCONY kontrast (ciemny w light) -> widoczny w OBU trybach. ❌ NIE ustawiaj primary na biel w light (znika na białej karcie). UWAGA: przycisk URUCHAMIAJĄCY automatyzację to osobny „hero” z wypełnieniem marki (patrz snippets/action-button.html) — NIE używa tej roli. */ --primary: #0b0d12; --primary-foreground: #ffffff; --overlay-backdrop: rgba(10, 12, 17, 0.45); /* przygaszenie tła pod dialogiem */ /* --- Kolory statusów (§2.8, reguły ST-1..ST-4) --------------------------- Osobna grupa semantyczna: czerwony=błąd/niszczące, zielony=sukces, bursztyn=ostrzeżenie, niebieski=informacja. Trójka na rolę: -> tekst / ikona / obrys statusu (kontrast min. 4.5:1 na -bg) -bg -> delikatny tint tła (status to sygnał, nie plama — ST-2) -border -> obrys plakietki / pola w danym statusie Jedyne DUŻE wypełnienie statusowe to przycisk Danger (-solid). */ --status-danger: #b91c1c; --status-danger-bg: #fef2f2; --status-danger-border: #fecaca; --status-success: #15803d; --status-success-bg: #f0fdf4; --status-success-border: #bbf7d0; --status-warning: #b45309; --status-warning-bg: #fffbeb; --status-warning-border: #fde68a; --status-info: #1d4ed8; --status-info-bg: #eff6ff; --status-info-border: #bfdbfe; /* Wypełniony przycisk Danger (Usuń) — jedyny status jako duża plama (ST-2). Sukces NIGDY nie jest przyciskiem wypełnionym. Ten sam w light i dark. */ --status-danger-solid: #dc2626; --status-danger-solid-foreground: #ffffff; /* --- Kolory serii wykresów (§3 Wykresy, CH-3) --------------------------- WYŁĄCZNIE dla serii danych na wykresach - nie statusów, nie UI. */ --chart-1: #0e94ad; /* cyan */ --chart-2: #8e5be0; /* lawenda */ --chart-3: #d96a7e; /* przygaszony róż */ --chart-4: #65a30d; /* lime */ /* Tinty awatara — delikatne tła marki dla inicjałów, tożsamość rozmówcy; inicjał zawsze w --text. */ --avatar-1: rgba(103, 232, 249, 0.22); /* cyan */ --avatar-2: rgba(192, 132, 252, 0.22); /* lawenda */ --avatar-3: rgba(253, 164, 175, 0.24); /* róż */ --avatar-4: rgba(163, 230, 53, 0.24); /* lime */ /* Promienie — mała, zamknięta skala (te same wartości w light i dark). */ --radius-field: 12px; /* pola, inputy, zwykłe przyciski */ --radius-card: 20px; /* karty, panele (SUFIT: nie zwiększaj) */ --radius-pill: 999px; /* pigułki: nav-active, chip, toggle */ --radius-hero: 16px; /* przycisk startowy (hero, §3 B-6) — między field a card */ /* --- Odstępy — skala 4px (§2.7, reguła SP-1) ----------------------------- Nazwa = wartość w px. ❌ wartości spoza skali (13px, 27px) na oko. */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; /* --- Typografia (§2.6, reguły TY-3, TY-5) -------------------------------- Dwa kroje kanoniczne: Outfit tylko dla tytułów (display), Inter dla reszty (body). Fallback bezszeryfowy systemowy. Fonty muszą się FAKTYCZNIE załadować (TY-5) — sama deklaracja rodziny bez dostarczenia kroju to błąd. */ --font-display: "Outfit", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Rozmiary kanoniczne (tabela ról w §2.6 podaje dopuszczalną tolerancję). */ --fs-page-title: 26px; /* tytuł strony (Outfit) */ --fs-section-title: 16px; /* tytuł sekcji w karcie (Outfit) */ --fs-body: 14px; /* treść / body (Inter) */ --fs-label: 13.5px; /* etykieta pola (Inter) */ --fs-hint: 12.5px; /* podpis / hint (Inter) */ --fs-eyebrow: 11px; /* eyebrow (Inter, UPPERCASE + tracking, TY-2) */ --lh-tight: 1.25; /* tytuły, pozycje nawigacji (ciasny interlinia) */ --lh-body: 1.5; /* treść czytana w akapitach */ /* --- Cienie / elevation (§2.5, reguła T-3) ------------------------------- Kartę definiuje ZAWSZE hairline; cień tylko w light (w dark głębię robi hairline + jaśniejsza powierzchnia -> --card-shadow: none w dark). */ --card-shadow: 0 1px 3px rgba(11, 13, 18, .06), 0 1px 2px rgba(11, 13, 18, .04); /* Warstwa unosząca się nad treścią: dropdowny, kafelki menu, modale. Ten sam w obu trybach (głęboki cień działa też na graficie). */ --shadow-elevated: 0 24px 60px -28px rgba(0, 0, 0, .45); /* --- Ruch (§8, reguły M-1, M-2) ------------------------------------------ Cały ruch aplikacji używa tych dwóch wartości. Kanoniczny czas to 200 ms (M-1/M-2 mówią „~180-220 ms” — kanon to środek tego przedziału). */ --motion-dur: 200ms; --motion-ease: ease-out; /* --- Warstwy (z-index) (§2.4) -------------------------------------------- Element wyżej w tej skali NIGDY nie zasłania elementu niżej. Nie wymyślaj wartości spoza skali. */ --z-shell: 20; /* sidebar (powłoka) */ --z-header: 30; /* header (nad sidebarem) */ --z-popover: 40; /* menu profilu, kafelek hamburgera, tooltipy */ --z-modal: 50; /* dialogi / potwierdzenia */ --z-toast: 60; /* powiadomienia (najwyżej) */ /* --- Wymiary powłoki (§2.4) ----------------------------------------------- */ --header-height: 56px; /* stała, kompaktowa wysokość headera (L-3) */ --shell-hairline-inset: 20px; /* wcięcie na końcach hairline'ów powłoki (L-1) */ --sidebar-width: 260px; /* bazowa szerokość sidebara */ --sidebar-max-width: 320px; /* sidebar może rozszerzyć się do najszerszej etykiety (L-6) */ } /* ZMIEŃ TYLKO SELEKTOR, jeśli Twój projekt toggle'uje dark inaczej. */ [data-theme="dark"] { --surface: #24262c; /* podniesione: karty wyraźnie odbijają się od washu (bright-room) */ --surface-sunken: #2c2e34; --border: rgba(255, 255, 255, 0.12); --shell-hairline: rgba(255, 255, 255, 0.14); /* w dark hairline powłoki lekko mocniejszy niż --border - czytelny nad ciemnym washem (L-1) */ --nav-active-bg: #34363e; /* nadal jaśniejszy od --surface -> aktywny pill czytelny (L-2) */ --text: #f2f4f7; --text-muted: #99a2ae; --text-subtle: #6a737f; --primary: #f2f4f7; /* jasny w dark -> główny przycisk nadal wyraźny */ --primary-foreground: #0b0d12; --overlay-backdrop: rgba(0, 0, 0, 0.60); /* Statusy w dark: jaśniejszy tekst + PRZEZROCZYSTE tinty nad grafitem (§2.5). Tint = ta sama barwa co tekst z alfą ~0.10, obrys ~0.28. -solid bez zmian. */ --status-danger: #f87171; --status-danger-bg: rgba(248, 113, 113, 0.10); --status-danger-border: rgba(248, 113, 113, 0.28); --status-success: #4ade80; --status-success-bg: rgba(74, 222, 128, 0.10); --status-success-border: rgba(74, 222, 128, 0.28); --status-warning: #fbbf24; --status-warning-bg: rgba(251, 191, 36, 0.10); --status-warning-border: rgba(251, 191, 36, 0.28); --status-info: #60a5fa; --status-info-bg: rgba(96, 165, 250, 0.10); --status-info-border: rgba(96, 165, 250, 0.28); --status-danger-solid: #dc2626; --status-danger-solid-foreground: #ffffff; /* Serie wykresów w dark: tony średnie (kontrast na #24262c, CH-3). */ --chart-1: #0891b2; --chart-2: #a855f7; --chart-3: #db5c72; --chart-4: #65a30d; --avatar-1: rgba(103, 232, 249, 0.20); --avatar-2: rgba(192, 132, 252, 0.20); --avatar-3: rgba(253, 164, 175, 0.20); --avatar-4: rgba(163, 230, 53, 0.20); /* W dark głębię karty robi hairline — cień znika (T-3). */ --card-shadow: none; /* --shadow-elevated i --radius-*, skale odstępów/typografii/ruchu/warstw są wspólne dla obu trybów (zdefiniowane w :root). */ } /* Domyślny kolor tekstu aplikacji -> rola --text (czytelny w obu trybach). */ body { color: var(--text); } /* ============================================================================= Progi responsywności (§2.9, reguła BP-1) — REFERENCJA DOKUMENTACYJNA. Cała aplikacja używa DOKŁADNIE dwóch progów: 600px -> telefon (<600) ≤ tablet 1024px -> tablet (<1024) ≤ desktop ❌ wymyślanie własnych progów per widok/komponent. UWAGA: media queries NIE czytają custom properties — dlatego progi żyją tu jako komentarz-kanon, a w kodzie wpisuje się je wprost w `@media`. To świadome. @media (min-width: 600px) { ... } -> tablet w górę @media (min-width: 1024px) { ... } -> desktop w górę ============================================================================= */