/* ============================================================================ WARSTWA TOKENÓW PORTALU CRH Przeniesienie systemu wizualnego portalu Cosmedica (stx-bi-kit) na markę CRH. Zasada zostaje ta sama: JEDNO źródło prawdy dla koloru, kroju, promienia i cienia. Komponenty portalu nie zawierają literałów - czytają var(--stx-*). ── CO ZMIENIŁA MARKA ────────────────────────────────────────────────────── Z Cosmediki bierzemy STRUKTURĘ tokenów i reguły użycia koloru. Wartości są CRH: granat #00053E i błękit #0072BC zamiast morskiego #2F8F89, Archivo w nagłówkach zamiast Inter. Układ, hierarchia i geometria kontrolek pozostają bez zmian - to one, a nie barwa, odpowiadają za to, że raport czyta się jak raport. ── ZASADY KOLORU (przejęte wprost) ──────────────────────────────────────── · Kolor niesie ODCHYLENIE, nie kategorię. Serie danych są neutralne (--stx-actual / --stx-py / --stx-plan), zieleń i czerwień rezerwujemy dla różnicy względem bazy. · Słupki i tory rankingów są SPOKOJNE (--stx-bar-*) - bez ciężkich mas. · Kolor marki (--stx-primary) żyje tylko w chromie: aktywna nawigacja, filtry, linki, akcenty. Nigdy jako domyślny kolor serii danych. · NIE MA żółtego stanu ostrzegawczego w semantyce danych. Logika to good · bad · neutral · info. Rebranding: podmieniasz blok :root - kod komponentów bez zmian. ========================================================================== */ :root { /* ────────────────────────────────────────────────────────────────────── 1. TYPOGRAFIA Archivo w nagłówkach niesie markę CRH (konstrukcyjny, wąski grotesk), Inter w treści i liczbach - bo to on ma cyfry tabelaryczne i znosi gęste tabele. Mono tylko do SQL i drobnych wierszy liczbowych. ────────────────────────────────────────────────────────────────────── */ --stx-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --stx-font-head: 'Archivo', 'Inter', 'Segoe UI', system-ui, sans-serif; --stx-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, SFMono-Regular, Menlo, monospace; --stx-tracking-head: -0.012em; --stx-tracking-title: -0.02em; --stx-tracking-label: 0.07em; --stx-tracking-label-sm: 0.06em; /* Skala rozmiarów - role, nie liczby: zmiana tutaj przechodzi przez portal. */ --stx-fs-page-title: 23px; --stx-fs-card-title: 15.5px; --stx-fs-kpi: 28px; --stx-fs-kpi-suffix: 15px; --stx-fs-body: 13px; /* Jedyny stopień dołożony ponad zestaw Cosmediki: tytuł sekcji i zdanie- odpowiedź agenta. Cosmedica trzyma go literałem w stronach, bo jej kit nie rysuje sekcji; u nas rysuje je portal, więc musi być tokenem. Wiodący akapit NIE ma własnego stopnia - bierze --stx-fs-card-title, inaczej 15 i 15,5 px stoją obok siebie i czyta się to jak błąd. */ --stx-fs-section-title: 19px; --stx-fs-cell: 12.5px; --stx-fs-control: 12.5px; --stx-fs-micro: 11.5px; --stx-fs-num: 11px; --stx-fs-label: 10px; --stx-fs-label-sm: 9.5px; --stx-fs-tiny: 8.5px; /* ────────────────────────────────────────────────────────────────────── 2. CHROME I POWIERZCHNIE (marka WYŁĄCZNIE tutaj) ────────────────────────────────────────────────────────────────────── */ --stx-primary: #0072BC; --stx-primary-strong: #005A96; --stx-accent: #E8912B; --stx-brand: #00053E; /* Kropka w wordmarku StatXplorer. - element marki PRODUKTU, nie klienta, więc nie zmienia się przy rebrandingu. */ --stx-wordmark-dot: #0DD14A; --stx-page: #EEF1F6; --stx-surface: #FFFFFF; --stx-surface-sunken: #E7EBF3; --stx-line: #E1E6EF; /* Hairline delikatniejszy od ramki - separator wiersza w tabeli, stopka karty. */ --stx-line-soft: #EDF0F6; --stx-text: #182030; --stx-text-muted: #5C6679; /* Trzeci stopień hierarchii tekstu: podpisy osi, noty przy legendzie. */ --stx-text-soft: color-mix(in srgb, var(--stx-text) 55%, var(--stx-surface)); /* Stany powierzchni liczone z tekstu i karty - odwracają się z motywem same. */ --stx-hover-surface: color-mix(in srgb, var(--stx-text) 4%, transparent); --stx-hover-tint: color-mix(in srgb, var(--stx-primary) 8%, transparent); --stx-row-hover: color-mix(in srgb, var(--stx-primary) 5%, transparent); --stx-tint-primary: color-mix(in srgb, var(--stx-primary) 7%, var(--stx-surface)); --stx-tint-strong: color-mix(in srgb, var(--stx-primary) 12%, transparent); --stx-line-primary: color-mix(in srgb, var(--stx-primary) 45%, var(--stx-line)); --stx-on-primary: #FFFFFF; /* ────────────────────────────────────────────────────────────────────── 3. SEMANTYKA ODCHYLENIA - good · bad · neutral · info W kontrolingu kosztu „dobrze" to SPADEK, więc komponent liczbowy dostaje downIsGood i sam dobiera token; paleta go nie przesądza. ────────────────────────────────────────────────────────────────────── */ --stx-good: #1B7A46; --stx-bad: #B33A2B; --stx-info: #0072BC; /* Strefa tolerancji / brak oceny - szarość, nie kolor alarmowy. */ --stx-neutral: #78839A; /* Kropka statusu, gdy KPI nie ma oceny - jaśniejsza niż neutral. */ --stx-status-none: var(--stx-line); --stx-tint-good: color-mix(in srgb, var(--stx-good) 9%, var(--stx-surface)); --stx-tint-bad: color-mix(in srgb, var(--stx-bad) 8%, var(--stx-surface)); --stx-tint-neutral: color-mix(in srgb, var(--stx-neutral) 7%, var(--stx-surface)); /* ────────────────────────────────────────────────────────────────────── 4. SCENARIUSZE (serie danych - neutralne z definicji) AC i PL mają CELOWO tę samą domyślną: scenariusze rozdziela FORMA (pełne wypełnienie kontra kontur), nie barwa. ────────────────────────────────────────────────────────────────────── */ --stx-actual: #182030; --stx-py: #8E97A8; --stx-plan: #182030; --stx-line-weak: #A9B2C2; /* ────────────────────────────────────────────────────────────────────── 5. SŁUPKI I TORY - spokojne wizualnie ────────────────────────────────────────────────────────────────────── */ --stx-bar: #4A5468; --stx-bar-soft: #8E97A8; --stx-bar-track: #E7EBF3; --stx-bar-good: var(--stx-good); --stx-bar-bad: var(--stx-bad); /* PASMO ODNIESIENIA za serią wykresu. Hue z marki, bo korytarz to granica UZGODNIONA, nie ocena. SIŁA stoi tu jako LICZBA, nie gotowy kolor: silnik wykresu czyta token przez getComputedStyle i nie rozwiąże color-mix - dlatego kolor z tokenu, przezroczystość osobno. */ --stx-band-opacity: 0.08; /* ────────────────────────────────────────────────────────────────────── 6. GEOMETRIA ────────────────────────────────────────────────────────────────────── */ --stx-radius-card: 8px; --stx-radius-note: 10px; --stx-radius-control: 8px; --stx-radius-chip: 6px; --stx-radius-bar: 3px; --stx-radius-pill: 999px; --stx-control-h: 30px; --stx-control-h-lg: 32px; --stx-control-h-sm: 28px; --stx-gap-col: 16px; --stx-gap-row: 12px; --stx-card-pad: 20px; --stx-kpi-pad: 16px 18px 14px; --stx-sidebar-w: 260px; --stx-sidebar-w-collapsed: 56px; --stx-topbar-h: 46px; /* ────────────────────────────────────────────────────────────────────── 7. CIENIE I OBWÓDKI FOKUSU Karty są PŁASKIE (8px, hairline, bez cienia). Cień pojawia się wyłącznie na hover, na przypiętej belce filtrów i pod warstwami unoszonymi. ────────────────────────────────────────────────────────────────────── */ --stx-shadow-hover: 0 6px 18px -12px color-mix(in srgb, var(--stx-text) 22%, transparent); --stx-shadow-row: 0 5px 16px -10px color-mix(in srgb, var(--stx-text) 18%, transparent); --stx-shadow-sticky: 0 6px 14px -10px color-mix(in srgb, var(--stx-text) 20%, transparent); --stx-shadow-pop: 0 10px 30px -12px color-mix(in srgb, var(--stx-text) 40%, transparent); --stx-shadow-drawer: 0 0 40px color-mix(in srgb, var(--stx-text) 22%, transparent); --stx-shadow-fab: 0 4px 14px color-mix(in srgb, var(--stx-text) 20%, transparent); --stx-scrim: color-mix(in srgb, var(--stx-text) 35%, transparent); --stx-ring: 0 0 0 2px color-mix(in srgb, var(--stx-primary) 25%, transparent); /* ────────────────────────────────────────────────────────────────────── 8. RUCH ────────────────────────────────────────────────────────────────────── */ --stx-ease: cubic-bezier(0.22, 1, 0.36, 1); --stx-dur-fast: 0.15s; --stx-dur: 0.25s; /* Wejście treści jest wolniejsze od reakcji na kliknięcie: ma być zauważone jako kolejność czytania, a nie jako opóźnienie interfejsu. */ --stx-dur-wejscie: 0.56s; --stx-dur-slupek: 0.7s; } /* ────────────────────────────────────────────────────────────────────────── TRYB CIEMNY Przestawiamy wyłącznie powierzchnie, tekst i te serie, które były kalibrowane na biel. Wszystko liczone z color-mix odwraca się samo, więc blok jest krótki - i taki ma zostać. ────────────────────────────────────────────────────────────────────────── */ html[data-stx-theme='dark'] { --stx-primary: #4FA3DC; --stx-primary-strong: #7CBDE8; --stx-accent: #F0A84F; --stx-brand: #7CBDE8; --stx-page: #0C1222; --stx-surface: #141C2F; --stx-surface-sunken: #1B2439; --stx-line: #26314A; --stx-line-soft: #1E2739; --stx-text: #E9EFF8; --stx-text-muted: #9AA7BE; --stx-good: #45B877; --stx-bad: #E0695A; --stx-info: #4FA3DC; --stx-neutral: #7C879C; --stx-actual: #E9EFF8; --stx-py: #7C879C; --stx-plan: #E9EFF8; --stx-line-weak: #5E6A80; --stx-bar: #9AA7BE; --stx-bar-soft: #6C7890; --stx-bar-track: #1E2739; --stx-on-primary: #0C1222; }