/* * Regulaw — tokeny design systemu v2 (handoff README, arkusz PODPISANY 10.08.2026). * JEDYNE miejsce z surowymi hexami i rozmiarami skali typograficznej — * pilnują tego wartownicy (scripts/style-guard.test.ts, tests/design_guard.test.ts). * src/theme/tokens.ts PARSUJE ten plik (?raw) — wartości żyją tylko tutaj. * * Reguła kontrastu (README): --gold (#D7B662) na --paper ma ~1.6:1 — * NIGDY jako tekst/obramowanie na kremie; na kremie akcent = --gold-ink. * Kolor nigdy nie koduje znaczenia sam — zawsze towarzyszy mu słowo. */ :root { /* ===== KOLORY — role (pełna tabela README) ===== */ --paper: #F7F3E9; /* tło strony i aplikacji */ --surface: #FFFFFF; /* karty, pola formularza, tabele na kremie */ --ink: #23201A; /* nagłówki i tekst główny na kremie */ --ink-body: #4B564C; /* akapity, opisy pytań */ --ink-muted: #667163; /* metadane, mikrocopy, etykiety; decyzja b 10.08: wartość README (4.07 na paper) była poniżej AA — 7% ciemniej, 4.61/4.99 */ --green-900: #16332A; /* stopka, najgłębsze tło */ --green-800: #19382E; /* sekcje pełnowymiarowe na zieleni */ --green-700: #1D4034; /* przycisk podstawowy na kremie */ --green-600: #29453B; /* karta na zielonym tle */ --green-line: #2A483D; /* obramowanie/separator na zieleni */ --green-text: #C7D2C6; /* tekst akapitowy na zieleni */ --green-muted: #9FB0A0; /* mikrocopy na zieleni */ --gold: #D7B662; /* akcent — TYLKO na zieleni */ --gold-strong: #C9A24A; /* hover akcentu na zieleni */ --gold-hover-green: #E0CE9A; /* hover przycisku podstawowego na zieleni */ --gold-ink: #8A6A22; /* ten sam akcent na kremie (kontrast!) */ /* PARA AKCENTU (decyzja [3], podpis 10.08): jedna rola, dwie powierzchnie — akcent na zieleni = gold, akcent na kremie/bieli = gold-ink. Wybór wariantu zależy WYŁĄCZNIE od tła; granicy pilnują wartownik kontrastu i rejestr golda (bez dopisywania wyjątków na krem). */ --accent-on-green: var(--gold); --accent-on-cream: var(--gold-ink); --gold-ink-on-cream: #836520;/* decyzja b 10.08: wariant gold-ink dla ZAMIERZONYCH kremowych powierzchni nie-pól (callouty generatora na --paper, AA 4.93); pola formularza wg README są białe */ --line: rgba(35, 32, 26, 0.14); /* obramowanie kart, separatory na kremie */ --line-strong: rgba(35, 32, 26, 0.22); /* obramowanie pól formularza */ --line-option: rgba(35, 32, 26, 0.18); /* obramowanie opcji odpowiedzi (README: krok skanu) */ --line-row: rgba(35, 32, 26, 0.08); /* separator wierszy tabeli obowiązków */ --green-tint: rgba(29, 64, 52, 0.05); /* wybrana opcja / hover przycisku drugorzędnego */ --green-border-soft: rgba(29, 64, 52, 0.4); /* obramowanie przycisku drugorzędnego */ /* ===== KOLORY FUNKCYJNE — werdykty skanu ===== */ --verdict-applies: #A64B2A; /* „Dotyczy" — akt się stosuje */ --verdict-not: #3A6B54; /* „Nie dotyczy" — z przesłanką wykluczenia */ --verdict-check: #8A6A22; /* „Do weryfikacji" — brak danych / ocena prawnika */ --deadline-critical: #8C2F2A; /* termin < 30 dni — TYLKO na datach */ /* pigułki werdyktów NA ZIELENI: wypełnienie jasne, tekst green-900 */ --pill-applies-green: #E3B58C; /* „Dotyczy" na zieleni */ --pill-check-green: #D7B662; /* „Weryfikacja" na zieleni (= gold) */ --pill-not-green-border: #4A6659;/* „Nie dotyczy" na zieleni: transparent + ta ramka */ /* stan disabled */ --disabled-bg: #EFEADD; --disabled-text: #9AA396; --disabled-border: rgba(35, 32, 26, 0.1); /* ===== TYPOGRAFIA — kroje ===== */ --font-display: 'Bona Nova', Georgia, serif; /* szeryf mówi, PO CO */ --font-ui: 'Lato', system-ui, sans-serif; /* grotesk mówi, CO ZROBIĆ */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* mono CYTUJE PRZEPIS */ /* ===== TYPOGRAFIA — skala (rozmiar / interlinia) ===== */ --text-display: 66px; --leading-display: 1.05; /* display 700, ls -0.015em */ --text-h2: 40px; --leading-h2: 1.1; /* display 700 */ --text-h3-card: 24px; --leading-h3-card: 1.2; /* display 700; do 30px */ --text-h3-card-lg: 30px; --leading-h3-card-lg: 1.25; --text-h3-ui: 20px; --leading-h3-ui: 1.25; /* ui 700, ls -0.01em */ --text-body-lg: 17px; --leading-body-lg: 1.6; /* ui 400, ink-body */ --text-body: 14.5px; --leading-body: 1.65; /* ui 400 — domyślny tekst produktu */ --text-small: 13px; --leading-small: 1.5; /* ui 400, podpisy pól */ --text-label: 10px; --tracking-label: 0.14em; /* mono 400, uppercase */ --text-legal: 12.5px; --leading-legal: 1.7; /* mono 400, podstawa prawna; min 11px */ --text-legal-sm: 11px; --text-quote: 24px; --leading-quote: 1.4; /* display 400 italic, cytaty z aktów */ --tracking-display: -0.015em; --tracking-h3-ui: -0.01em; /* minima: nigdy poniżej 13px w interfejsie, 12pt w wydruku raportu */ /* ===== ODSTĘPY, SIATKA, FORMA ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 20px; --space-5: 28px; --space-6: 40px; --space-7: 56px; --space-section: 104px; --container: 1180px; /* kontener treści; wiersz tekstu 60–68 znaków */ --grid-gap: 16px; /* 12 kolumn */ --r-field: 4px; --r-btn: 8px; --r-card: 10px; --r-pill: 999px; --transition: 140ms ease; /* wyłącznie background, border-color, color */ --shadow-overlay: 0 2px 6px rgba(35, 32, 26, 0.07); /* TYLKO menu/modal/dropdown */ --focus-ring: 0 0 0 3px rgba(29, 64, 52, 0.1); --card-pad: 28px; --card-pad-compact: 20px; --card-pad-airy: 36px; /* ===== POMOST v1→v2 (spoza tabeli README — do rozstrzygnięcia w krokach 3–6) ===== Tokeny Hybrydy bez odpowiednika w tabeli; trzymają dzisiejsze komponenty przy życiu BEZ zmian layoutu. Każde usunięcie = decyzja przy krokach 3–6. */ --legacy-brand-soft: #E8EFEA; /* blady zielony towarzysz brand (chipy, tła) */ --legacy-ok-soft: #E6F2EC; /* pastelowe tła statusów — README ich nie zna */ --legacy-warn-soft: #F8EFDF; --legacy-bad-soft: #F8E9E6; --legacy-fill: #ECE6D9; /* kremowy tor pól; README dla toru paska: --disabled-bg */ --legacy-line-solid: #DDD6C6; /* dawna linia kryta — README: --line (rgba) */ --legacy-progress-end: #3E9A74; /* koniec gradientu paska — README: pasek płaski green-700 */ /* ===== ALIASY --rg-* (kompatybilność stron statycznych i chrome) ===== Wyłącznie odwołania var() — zero nowych wartości. Strony public/*.html czytają --rg-*; źródłem są role wyżej. */ --rg-brand: var(--green-700); --rg-brand-soft: var(--legacy-brand-soft); --rg-brand-deep: var(--green-900); --rg-paper: var(--paper); --rg-card: var(--surface); --rg-ink: var(--ink); --rg-ink-soft: var(--ink-body); --rg-mut: var(--ink-muted); --rg-line: var(--line); --rg-fill: var(--legacy-fill); --rg-ok: var(--verdict-not); --rg-ok-soft: var(--legacy-ok-soft); --rg-warn: var(--verdict-check); --rg-warn-soft: var(--legacy-warn-soft); --rg-bad: var(--verdict-applies); --rg-bad-soft: var(--legacy-bad-soft); --rg-gold: var(--gold); --rg-gold-deep: var(--gold-ink); --rg-progress-end: var(--legacy-progress-end); }