/* ============================================================ tokens.css - źródło prawdy systemu identyfikacji Łukasz Podgórski / Aitomate Zmiana jednej zmiennej tutaj aktualizuje WSZYSTKIE layouty. ============================================================ */ :root { /* ---- Kolor: baza monochromatyczna ---- */ --ink: #111114; /* atrament - tekst, linie */ --paper: #FAFAF7; /* papier - tło, ciepła biel */ --gray-50: #F2F1EC; --gray-100: #E7E5DE; --gray-300: #C9C6BC; --gray-500: #8C887E; --gray-700: #514E47; --gray-900: #23221E; /* ---- Kolor marki: Combo A (zablokowany) ---- */ --brand: #378CCF; /* Signal Blue - kolor firmowy, kotwica systemu */ --accent: #378CCF; /* akcent = kolor marki */ --accent-ink: #06243F; /* tekst na tle akcentu (ciemny granat, kontrast AA) */ --brand-600: #2A6FA8; /* ciemniejszy błękit - hover / stany aktywne */ --brand-100: #DCEBF8; /* jasny błękit - delikatne wypełnienia / tła */ /* ---- Typografia: rodzina IBM Plex ---- */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; /* Skala modularna ~1.25 (major third) */ --step--1: 0.80rem; --step-0: 1.00rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem; --step-5: 3.052rem; --step-6: clamp(3.5rem, 7vw, 5.96rem); /* display / hero */ --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; --tracking-label: 0.14em; /* eyebrow / mono labels */ /* ---- Odstępy (8px base) ---- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 1rem; /* 16 */ --space-4: 1.5rem; /* 24 */ --space-5: 2.5rem; /* 40 */ --space-6: 4rem; /* 64 */ --space-7: 6rem; /* 96 */ --space-8: 10rem; /* 160 */ /* ---- Linie hairline (zamiast cieni) ---- */ --rule-color: var(--ink); --rule: 1px solid var(--ink); --rule-soft: 1px solid var(--gray-300); /* ---- Układ ---- */ --measure: 68ch; /* komfortowa szerokość tekstu */ --container: 1200px; --gutter: var(--space-4); } /* ============================================================ Wariant ciemny - nadpisuje tylko bazę (ink/paper/szarości/akcent). Użycie: albo
. Komponenty z base.css dziedziczą automatycznie (używają zmiennych). ============================================================ */ [data-theme="dark"] { --ink: #FAFAF7; /* tekst i linie na ciemnym tle */ --paper: #131316; /* tło ciemne (nie czysta czerń) */ --gray-50: #1B1B1F; --gray-100: #232327; --gray-300: #3A3A40; --gray-500: #6E6E78; --gray-700: #A8A8B0; --gray-900: #D8D8DC; --brand: #4A9FDD; /* jaśniejszy Signal Blue - kontrast AA na ciemnym */ --accent: #4A9FDD; --accent-ink: #06243F; /* tekst na akcencie (bez zmian) */ --brand-600: #378CCF; --brand-100: #16364E; --rule-color: var(--ink); --rule: 1px solid var(--ink); --rule-soft: 1px solid var(--gray-300); } /* ============================================================ Rozszerzenie: zaokrąglenia, powierzchnie, szerokości. Spójne z lukaszpodgorski.pl/assets/brand/tokens.css - te same wartości, żeby oba serwisy wyglądały jak jeden system. ============================================================ */ :root { --radius-sm: 8px; --radius-card: 14px; --radius-pill: 999px; --surface: var(--gray-50); --surface-2: var(--gray-100); --surface-dark: #131316; --surface-dark-ink: #FAFAF7; --surface-dark-mute: #A8A8B0; --surface-dark-rule: #2A2A30; --brand-on-dark: #4A9FDD; --container-wide: 1440px; --container-prose: 72ch; }