/* ===================================================================== PLATFORMA INŻYNIERSKA — KOMPOZYCJA (design system) --------------------------------------------------------------------- JEDNO źródło wyglądu dla huba i wszystkich podstron. Wzorcem był index.html — ten plik jest jego ekstrakcją, więc hub korzysta z tych samych klas co kalkulatory (żadnych dwóch prawd). Zasada podziału pracy: • portal.css — chrom platformy (pasek górny, stopka, PL/EN, wskazówki) • pf-ui.css — kompozycja treści strony (tło, karty, pola, przyciski) • Tailwind — WYŁĄCZNIE układ: grid, flex, gap-*, max-w-*, breakpointy Kolorów, ramek, promieni i cieni NIE hardkodujemy w stronach — biorą się stąd, dzięki czemu zmiana akcentu w config.js przechodzi przez całość. Kolejność ładowania w : portal.css → pf-ui.css → styl strony. ===================================================================== */ /* ===================================================================== 1. TOKENY Dokładka do zmiennych z portal.css (--pf-accent, --pf-bg, --pf-line, --pf-text, --pf-text-2). Tu żyje paleta „sceny" przeniesiona z huba. ===================================================================== */ :root { --pf-canvas: #020617; /* tło strony — ciemniejsze niż slate-900 */ --pf-surface: rgba(30, 41, 59, .55); /* szkło: karty, panele */ --pf-surface-hi: rgba(30, 41, 59, .85); /* szkło pod kursorem */ --pf-surface-lo: rgba(15, 23, 42, .55); /* wgłębienie: wynik, blok wzoru */ --pf-edge: rgba(148, 163, 184, .14); /* ramka-włos */ --pf-edge-hi: rgba(148, 163, 184, .28); /* ramka wyróżniona */ --pf-r: 16px; /* karta, panel */ --pf-r-sm: 10px; /* pole, przycisk, zakładka */ --pf-r-xs: 8px; /* drobiazgi: badge, chip-ikona */ --pf-lift: 0 18px 40px -20px color-mix(in srgb, var(--pf-accent) 60%, #000); --pf-ring: 0 0 0 3px color-mix(in srgb, var(--pf-accent) 35%, transparent); --pf-mono: ui-monospace, 'Courier New', monospace; /* Barwy statusu — CAŁA paleta poza akcentem. Kolor w tej platformie ma znaczyć werdykt, nie ozdabiać: OK / uwaga / przekroczone / informacja. Nie dokładaj tu odcieni „bo ładny" — od wyróżnienia jest --pf-accent. */ --pf-ok: #22c55e; --pf-warn: #f59e0b; --pf-bad: #ef4444; --pf-info: #a78bfa; } /* Tekst w barwie statusu */ .pf-ok { color: var(--pf-ok); } .pf-warn { color: var(--pf-warn); } .pf-bad { color: var(--pf-bad); } .pf-info { color: var(--pf-info); } .pf-accent-text { color: var(--pf-accent-soft); } /* ===================================================================== 2. RESET To, co do tej pory było przeklejane w