/* ========================================================================== GTR DESIGN TOKENS - kanoniczne źródło prawdy dla całego ekosystemu ========================================================================== Utworzone: 2026-07-25 (rebranding ekosystemu) Decyzja: dane/decyzje.md → 25.07.2026 | PRODUKT / MARKETING | Rebranding ZASADA: to jest JEDYNE miejsce, gdzie definiuje się wartość. W stronach używa się wyłącznie var(--nazwa). Zero hardcode. Zmiana brandu = edycja tego pliku, nie 739 plików. Plik jest kanonem. Każda strona dostaje jego kopię w assets/css/tokens.css i importuje ją PRZED własnym CSS. ========================================================================== */ :root { /* --------------------------------------------------------------- 1. KOLORY - MARKA Czerwień #8D242A to jedyna stała rebrandingu (decyzja 25.07.2026). Reszta palety jest otwarta i może się zmienić. --------------------------------------------------------------- */ --color-brand: #AB2C17; /* GTR Red, kolor podstawowy */ --color-brand-hover: #8D242A; /* ciemniejszy wariant, stan hover */ --color-brand-active: #6D1C21; /* ciemniejszy, stan wciśnięcia */ --color-brand-subtle: #F5E9EA; /* tło akcentów, bardzo delikatne */ --color-brand-line: #E8A0A5; /* cienkie linie i obramowania w kolorze marki */ /* Akcent na ciemnym tle. Czerwień marki ma na czerni za mały kontrast, więc sekcje ciemne dostają własny akcent. Kolor nie jest przypadkowy: to barwa odzieży ostrzegawczej, obecna na zdjęciach GTR ze szkoleń. Używać WYŁĄCZNIE na tle ciemnym. Na jasnym obowiązuje --color-brand. */ --color-accent-hivis: #FF7A2E; /* Pierścień fokusu. Osobny token, bo musi być czytelny na tle jasnym, ciemnym i na przycisku w kolorze marki naraz. */ --color-focus: #FF7A2E; /* --------------------------------------------------------------- 2. KOLORY - NEUTRALNE JEDNA skala. Zastępuje równoległe systemy GTR + Tailwind slate/gray, które dziś współistnieją w kodzie (252× slate-900, 114× slate-500 itd.). --------------------------------------------------------------- */ --color-ink: #14161A; /* tekst główny, najciemniejszy */ --color-ink-soft: #3A3F47; /* tekst drugorzędny */ --color-ink-muted: #6B7280; /* podpisy, metadane (kontrast AA na białym) */ --color-surface: #FFFFFF; /* tło podstawowe */ --color-surface-raised: #F7F8F9; /* sekcje naprzemienne */ --color-surface-sunken: #EFF1F3; /* pola formularzy, wgłębienia */ --color-line: #E3E6E9; /* obramowania, separatory */ --color-line-strong: #C8CDD3; /* obramowania wymagające uwagi */ /* CZERŃ - wyłącznie sekcje-przerywniki, rytm jasne/ciemne/jasne. To NIE jest tryb ciemny. Ekosystem pozostaje jasny. Wyjątek świadomy: norsokm501.pl ma własny motyw ciemny (landing produktowy). */ --color-void: #0E0F11; /* tło sekcji-przerywnika */ --color-void-ink: #F2F3F4; /* tekst na czerni */ --color-void-muted: rgba(242,243,244,0.62); /* --------------------------------------------------------------- 3. KOLORY - SEMANTYCZNE Zieleń nie jest akcentem marki. Służy wyłącznie do komunikowania sukcesu, poprawnego statusu albo pozytywnego wyniku. --------------------------------------------------------------- */ --color-success: #059669; --color-warning: #B45309; --color-danger: #B42318; /* --------------------------------------------------------------- 4. AKCENT GRADIENTOWY Jedna delikatna poświata na stronę, w hero. Nie na każdym bloku. Referencja: Stripe. Intensywność: znacznie niższa niż u nich. --------------------------------------------------------------- */ --glow-brand: radial-gradient( 60% 50% at 80% 0%, rgba(141,36,42,0.10) 0%, rgba(141,36,42,0) 70% ); /* --------------------------------------------------------------- 5. TYPOGRAFIA - RODZINY Decyzja 2026-08-02: jeden stos systemowy dla tekstu i display. Bez importów zewnętrznych; monospace pozostaje dla treści technicznych. --------------------------------------------------------------- */ --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* --------------------------------------------------------------- 6. TYPOGRAFIA - SKALA Płynna, bez breakpointów. Sufit display 4.5rem: referencje (Stripe, Tesla) nie krzyczą rozmiarem, tylko precyzją. --------------------------------------------------------------- */ --text-xs: 0.8125rem; /* 13px */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1.0625rem; /* 17px, tekst czytelny */ --text-lg: 1.25rem; --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --text-2xl: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); --text-3xl: clamp(2.5rem, 2rem + 2.6vw, 3.75rem); --text-hero: clamp(2.75rem, 2rem + 3.6vw, 4.5rem); --leading-tight: 1.08; /* nagłówki display */ --leading-snug: 1.28; /* nagłówki sekcji */ --leading-normal: 1.65; /* tekst ciągły */ --tracking-display: -0.025em; /* podłoga -0.04em, poniżej litery się sklejają */ --tracking-normal: 0; --tracking-wide: 0.06em; --measure: 68ch; /* maksymalna długość wiersza tekstu */ /* --------------------------------------------------------------- 7. ODSTĘPY Skala 4px. Oddech jest głównym narzędziem referencji Stripe/Tesla, dlatego --space-section jest celowo duży. --------------------------------------------------------------- */ --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; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; --space-section: clamp(4rem, 3rem + 5vw, 8rem); /* odstęp między sekcjami */ --space-gutter: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); /* --------------------------------------------------------------- 8. PROMIENIE Cztery wartości zamiast obecnych ośmiu. rounded-full (9999px, dziś 105 użyć) zostaje WYŁĄCZNIE dla awatarów i kropek statusu. Nigdy dla przycisków - zakaz z gtr-design-system.md. --------------------------------------------------------------- */ --radius-sm: 4px; --radius: 8px; /* domyślny: przyciski, pola, karty */ --radius-lg: 14px; /* duże powierzchnie */ --radius-pill: 9999px; /* TYLKO awatary i kropki statusu */ /* --------------------------------------------------------------- 9. CIENIE Oszczędnie. Cień jest sygnałem uniesienia, nie dekoracją. --------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(20,22,26,0.05); --shadow: 0 4px 16px rgba(20,22,26,0.07); --shadow-lg: 0 12px 40px rgba(20,22,26,0.10); /* --------------------------------------------------------------- 10. WARSTWY Skala semantyczna. Koniec z wartościami 999 i 9999. --------------------------------------------------------------- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* --------------------------------------------------------------- 11. RUCH Wyłącznie krzywe wygaszające. Bez odbicia i sprężyny. Naprawia finding F2 z audytu 25.07 (cubic-bezier z overshoot 1.56). --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* domyślna */ --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1); --duration-fast: 140ms; --duration: 240ms; --duration-slow: 420ms; /* --------------------------------------------------------------- 12. UKŁAD --------------------------------------------------------------- */ --container: 1200px; --container-narrow: 780px; /* tekst ciągły, artykuły */ --header-height: 72px; } /* ========================================================================== DOSTĘPNOŚĆ ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration: 0ms; --duration-slow: 0ms; } }