/* ============================================================ ss-tokens.css | SoftwareStudio Group Sp. z o.o. magazyn.softwarestudio.com.pl Jedyne zrodlo prawdy dla kolorow, typografii, odstepow, promieni i cieni. Wczytywany PRZED assets/style.css - dlatego style.css nie ma juz wlasnego bloku :root. Jesli zobaczysz gdzies wartosc szesnastkowa wpisana wprost w regule komponentu, to jest blad do naprawienia tutaj, nie tam. Wartosci przeniesione z witryny wzorcowej www.softwarestudio.com.pl (assets/ss-tokens.css, stan 2026-09-10), zeby obie witryny mowily tym samym systemem wizualnym. Po kazdej zmianie w tym pliku podbij ?v=RRRRMMDD przy /assets/ss-tokens.css we wszystkich stronach oraz w /inc/footer.html. Serwer wysyla ten plik jako immutable - bez podbicia czesc uzytkownikow zobaczy stary uklad. Ostatnia wersja: 20260910 ============================================================ */ :root { /* --- Granaty i tusz: tlo ciemnych sekcji, kolor naglowkow --- */ --ss-ink: #0c1320; --ss-ink-700: #122036; --ss-navy: #16243f; --ss-navy-600: #1b2d4f; /* --- POMARANCZ MA TRZY ROLE - to nie jest jeden kolor --- #ff6a13 na bialym daje 2,87:1 i NIE przechodzi WCAG AA. Zanim uzyjesz ktorejkolwiek z tych zmiennych, ustal, co jest TLEM pod spodem. --ss-orange kreska, ikona, obramowanie, akcent NA CIEMNYM 6,5:1 na --ss-ink | 4,8:1 na --ss-navy --ss-orange-ink WYPELNIENIE, na ktorym lezy bialy tekst lub ikona 5,2:1 z biela --ss-orange-text pomaranczowy TEKST na jasnym tle 5,8:1 na bialym Nigdy nie wpisuj --ss-orange jako color: na jasnym tle ani jako tla pod bialym napisem. */ --ss-orange: #ff6a13; --ss-orange-ink: #c2410c; --ss-orange-text: #b04304; --ss-orange-600: #e85d09; /* akcent graficzny, NIE tlo pod bialym tekstem: 3,50:1 */ /* Hover wypelnienia pomaranczowego. Musi byc CIEMNIEJSZY od --ss-orange-ink, nie jasniejszy. Do 2026-09-10 hover przyciskow mial wpisane #e55c0b, czyli 3,58:1 z bialym napisem - kontrast SPADAL w momencie najechania mysza. Ta wartosc daje 7,31:1. */ --ss-orange-ink-hover: #9a3412; --ss-orange-300: #ff9a5c; --ss-amber: #f59e1b; /* Bursztyn na tle POLPRZEZROCZYSTYM lezacym na ciemnym. Kazda warstwa rgba() rozjasnia tlo i zjada kontrast: #f59e1b na plakietce hero (rgba(255,106,19,.15) na gradiencie) daje tylko 4,11:1. Ta odmiana - 5,29:1. Wykryte pomiarem w przegladarce, ze zlozeniem warstw alfa; liczenie na samych tokenach tego nie pokazuje. */ --ss-amber-300: #fbbf24; /* --- Niebieskie --- */ --ss-blue: #2b5fa3; --ss-blue-light: #e9f1fc; /* --- Tekst --- */ --ss-text: #14202f; --ss-muted: #5a6a7e; --ss-faint: #64748b; /* nie schodz nizej - #8a97a8 to 3,0:1 */ /* --- Powierzchnie --- */ --ss-white: #ffffff; --ss-bg-alt: #f5f7fb; --ss-bg-warm: #f8f6f3; --ss-border: #e4e9f2; --ss-border-soft: #eef2f8; /* --- Stany --- */ --ss-ok: #1e7a3c; --ss-ok-300: #4ade80; /* --- Kroje --- Para z witryny wzorcowej: Quicksand w naglowkach, Nunito Sans w tresci. Oba hostowane lokalnie w /google-fonts/, licencja SIL OFL 1.1, CSP font-src 'self'. Elms Sans zostaje w szeregu awaryjnym - jego pliki nadal leza w repozytorium, wiec cofniecie zmiany to skreslenie dwoch pierwszych pozycji z listy. Uwaga: Quicksand nie ma kursywy w ogole. w naglowku dalby pochylenie syntetyczne, dlatego style.css przedefiniowuje je na font-style: normal plus kolor akcentu. --f-mono to systemowy monospace: zero plikow, zgodne z CSP. */ --f-head: 'Quicksand', 'Elms Sans', 'Segoe UI', system-ui, sans-serif; --f-body: 'Nunito Sans', 'Elms Sans', 'Segoe UI', system-ui, sans-serif; --f-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace; /* --- Skala typograficzna (dol skali: 13 px, nic mniejszego w tresci) --- */ --fs-label: .8125rem; /* 13 px - etykiety, znaczniki */ --fs-sm: .9375rem; /* 15 px - podpisy, meta */ --fs-base: 1.0625rem; /* 17 px - tresc */ --fs-lead: 1.1875rem; /* 19 px - lead pod naglowkiem */ --fs-h3: 1.3125rem; /* 21 px */ --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); --fs-h1: clamp(2.125rem, 1.3rem + 3.6vw, 3.625rem); /* --- Odstepy --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* --- Promienie, cienie, ruch --- */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --sh-sm: 0 1px 3px rgba(16,28,48,.06), 0 1px 2px rgba(16,28,48,.05); --sh: 0 8px 28px -12px rgba(16,28,48,.18); --sh-md: 0 18px 48px -18px rgba(16,28,48,.28); --sh-lg: 0 32px 70px -24px rgba(12,19,32,.40); --sh-orange: 0 16px 40px -16px rgba(194,65,12,.45); --maxw: 1200px; --ease: cubic-bezier(.22,.61,.36,1); --t: .25s var(--ease); /* --- Cele dotykowe (WCAG 2.5.8 / 2.5.5) --- */ --tap: 48px; /* --- Aliasy dla assets/style.css --- Arkusz komponentow zna stare nazwy. Zamiast przepisywac 400 regul, stare nazwy wskazuja na nowe tokeny. Nowy kod pisz juz na nazwach z gornej czesci pliku. */ --ss-dark: #1f2d3a; /* legacy: tekst i tlo sekcji sprzed ujednolicenia */ --ss-dark-mid: #334251; /* legacy: tekst drugoplanowy, 9,7:1 na bialym */ --ss-radius: var(--r-sm); --ss-radius-lg: var(--r); --ss-shadow: var(--sh-sm); --ss-shadow-md: var(--sh); --ss-max-width: var(--maxw); --ss-font-head: var(--f-head); --ss-font-body: var(--f-body); --ss-transition: var(--t); } /* ============================================================ TRYB CIEMNY - przygotowany, celowo WYLACZONY. Wlaczyc dopiero wtedy, gdy zaden arkusz poza tym plikiem nie deklaruje wlasnego :root - inaczej czesc komponentow zostanie na jasnych wartosciach i strona rozjedzie sie w polowie. Stan na 2026-09-10: assets/style.css juz nie ma :root, ale strony maja jeszcze kolory wpisane w atrybuty style="". ============================================================ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --ss-white: #111a2b; --ss-bg-alt: #16243f; --ss-bg-warm: #131d30; --ss-border: #24344f; --ss-border-soft: #1c2a42; --ss-text: #e8edf6; --ss-muted: #a8b6c9; --ss-faint: #8b9ab0; --ss-navy: #dce5f2; --ss-navy-600: #eef3fa; --ss-orange-text: #ff9a5c; --ss-orange-ink: #e85d09; --ss-blue: #7fb0ea; --ss-blue-light: #16243f; } } ============================================================ */