/* ========================================================================== Akademia Claude — tokeny design systemu ========================================================================== Źródło: Specyfikacja-wykonawcza-Akademia-CFS.md §2. MARKA JEST ZMIENNA, RESZTA NIE. Akademia jest jedna dla całej grupy, ale każda spółka ma własne logo i własną barwę. Dlatego barwy marki siedzą w tokenach `--brand-*` przedefiniowanych per spółka przez `[data-tenant]`, a wszystko pozostałe — neutralne, statusy, typografia, siatka — jest wspólne i nie ma prawa się rozjeżdżać między spółkami. `--cfs-green*` zostaje jako ALIAS na `--brand-*`. Nazwy siedzą w kilkuset miejscach w CSS; przemianowanie ich nie zmieniłoby ani jednego piksela, a rozsypałoby historię zmian. Nowy kod pisz na `--brand-*`. REGUŁA DOBORU BARWY SPÓŁKI — nie do pominięcia przy dopisywaniu kolejnej: kolor bierzemy z LOGO, nie ze strony firmowej, bo to logo stoi w nagłówku obok interfejsu. Każdy odcień, na którym leży biały tekst, musi przejść WCAG AA (4.5:1). Przy CFS wymusiło to zejście z #35BA81 (2.47:1 — poniżej progu) na odcień z logo; przy ZIBI cyjan #00a3e0 ze strony odpadł z tego samego powodu (2.87:1). Kontrasty policzone, w komentarzach przy tokenach. ========================================================================== */ /* --- Marka grupy: ZIBI --------------------------------------------------- Domyślna skórka. Dostaje ją każdy, kogo domeny nie ma jeszcze w rejestrze spółek — grupowa marka jest bezpieczniejszym domyślnym niż marka jednej spółki córki. Barwa z logo (assets/img/zibi-logo.svg): #0060a9. */ :root { --brand: #0060a9; /* znak z logo — biały tekst NA nim 6.47:1 ✓ AA, i jako tekst na bieli 6.47:1 ✓. W odróżnieniu od zieleni CFS nie wymaga przyciemniania pod przyciski. */ --brand-dark: #004E8A; /* biały tekst 8.54:1 ✓ — wariant pod duże plamy koloru */ --brand-deep: #003B69; /* hover / naciśnięcie */ --brand-light: #4A9BE0; /* marka NA ciemnym tle — grafit 5.00:1, granat 4.84:1 ✓ AA */ --brand-tint: #EAF2FA; /* tła sekcji, wyróżnienia */ --brand-silver: #58595B; /* szary ze znaku — akcent industrialny (na bieli 7.01:1) */ } /* --- Car Flow System ----------------------------------------------------- Zieleń z logo (assets/img/cfs-logo.png), nie z §2.1 specyfikacji: §2.1 dawało #35BA81, czyli inny odcień niż znak w nagłówku, a do tego poniżej AA pod białym tekstem. Reguła w tej rampie: co ma na sobie biały tekst, bierze `-dark` albo `-deep`; `--brand` zostaje na obramowania i ikony. */ :root[data-tenant="cfs"] { --brand: #009359; /* znak z logo — akcenty, obramowania, ikony (3.95:1) */ --brand-dark: #00824F; /* biały tekst NA nim (4.88:1) oraz zieleń JAKO tekst na bieli (4.88:1) i na tincie (4.50:1) — oba ✓ AA. Wiążące jest to drugie: tint jest ciemniejszy od bieli. */ --brand-deep: #006B41; /* hover / naciśnięcie (6.61:1) */ --brand-light: #00C275; /* zieleń NA ciemnym tle — grafit/stopka (6.44:1 ✓ AA) */ --brand-tint: #EBF9F4; /* tła sekcji, wyróżnienia */ --brand-silver: #A5A5A5; /* akcent industrialny (RAL 9006) */ } /* Time Trend nie ma jeszcze własnego znaku ani barwy — do czasu ich dostarczenia korzysta ze skórki grupy. Wpis zostaje jawny, żeby było widać, że to decyzja, a nie przeoczenie. */ :root { /* --- Marka: aliasy zgodności ------------------------------------------ Wskazują na `--brand-*` powyżej. Nie wpisuj tu wartości barw. */ --cfs-green: var(--brand); --cfs-green-dark: var(--brand-dark); --cfs-green-deep: var(--brand-deep); --cfs-green-light: var(--brand-light); --cfs-green-tint: var(--brand-tint); /* --- Neutralne -------------------------------------------------------- */ --cfs-ink: #1A1917; /* tekst główny — czerń z logo (17.57:1) */ --cfs-graphite: #202826; /* ciemne sekcje / stopka */ --cfs-muted: #65736F; /* tekst drugorzędny — musi przejść AA na WSZYSTKICH jasnych tłach, nie tylko na bieli: biel 4.96:1, --cfs-bg-soft 4.65:1, --cfs-green-tint 4.58:1. */ --cfs-silver: var(--brand-silver); /* akcent industrialny — per spółka */ --cfs-line: #E2E8E5; /* linie, obramowania */ --cfs-bg: #FFFFFF; /* tło główne */ --cfs-bg-soft: #F6F8F7; /* tło alternatywne */ /* --- Statusy / semantyka ---------------------------------------------- Wspólne dla całej grupy i CELOWO niezależne od marki: zielone „ukończone" czyta się tak samo w każdej spółce, a przy niebieskiej marce dodatkowo odróżnia status od akcentu marki. */ --cfs-success: #00824F; /* ukończone — biały tekst 4.88:1 ✓ AA */ --cfs-warning: #E5A100; /* uwaga / moduł obowiązkowy */ --cfs-info: #2F80ED; /* wskazówka */ --cfs-danger: #D64545; /* zakaz / dane wrażliwe */ /* Warianty tintowane dla tła calloutów — dobrane pod kontrast AA tekstem --cfs-ink */ --cfs-warning-tint: #FDF4E0; --cfs-info-tint: #EAF2FD; --cfs-danger-tint: #FBECEC; /* --- Typografia (§2.2) ------------------------------------------------- Wspólna dla grupy. Font per spółka byłby możliwy, ale rozjechałby rytm tych samych lekcji czytanych obok siebie — świadomie nie robimy tego. Fallback: Inter + Montserrat. Tylko legalne web-fonty — docs/WDROZENIE.md. */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-head: "Montserrat", var(--font-ui); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Skala desktop: H1 40/48, H2 30/38, H3 22/30, body 17/28, small 14/22 */ --fs-h1: 40px; --lh-h1: 48px; --fs-h2: 30px; --lh-h2: 38px; --fs-h3: 22px; --lh-h3: 30px; --fs-body: 17px; --lh-body: 28px; --fs-small: 14px;--lh-small: 22px; /* --- Siatka, przestrzeń, kształty (§2.3) ------------------------------- */ --container: 1120px; /* max szerokość kontenera treści */ --measure: 768px; /* kolumna tekstu w lekcji (§4.5: ~720) */ --pad: 24px; /* padding kontenera (16 na mobile) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-card: 16px; --radius-btn: 10px; --radius-pill: 999px; --shadow-card: 0 6px 24px rgba(20, 32, 28, .08); /* --- Motion (§2.4) ----------------------------------------------------- */ --ease: cubic-bezier(.2, .7, .3, 1); /* ease-out */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; /* --- Warstwy ---------------------------------------------------------- */ --z-header: 100; --z-toast: 200; --z-modal: 300; } /* Mobile ~85% skali (§2.2) */ @media (max-width: 720px) { :root { --fs-h1: 34px; --lh-h1: 41px; --fs-h2: 26px; --lh-h2: 32px; --fs-h3: 19px; --lh-h3: 26px; --fs-body: 16px; --lh-body: 26px; --pad: 16px; } } /* §2.4 — respektować prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }