/* ARKANIP — Platforma Aktywacyjna: JEDNO miejsce z całą kolorystyką. Ten plik jest wspólny dla obu modułów: generator linkuje go przez `../środowisko-testowe-demonstracja/theme.css`, a do paczki ZIP trafia jako `theme.css` obok `index.html`. Podmiana palety na finalny branding = zmiana wartości poniżej i nic więcej — reszta arkuszy nie zna ani jednego surowego koloru. Wartości błękitów pochodzą z realnych tokenów marki (styles/tokens.css w platformie sprzedażowej), przełożonych na jasny, „medyczny" wariant wymagany dla panelu roboczego: dużo bieli, miękkie cienie, błękit jako akcent. */ /* Inter wgrany lokalnie, nie z Google Fonts: panel musi wyglądać tak samo u klienta bez internetu. Wersja zmienna (jeden plik na wszystkie grubości) w dwóch podzbiorach — `latin-ext` niesie polskie znaki (ą, ć, ę, ł, ń, ś, ź, ż), `latin` całą resztę. Razem ~120 kB w paczce. `font-display: swap` — tekst pojawia się natychmiast krojem systemowym i podmienia na Inter po wczytaniu, zamiast mrugać pustą stroną. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("vendor/inter-latin-ext-wght.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("vendor/inter-latin-wght.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Marka --- */ --color-primary: #2763c5; /* ARKANIP blue — przyciski, aktywna zakładka */ --color-primary-dark: #1b4a94; /* hover / wciśnięty stan */ /* NIE rozjaśniamy błękitu: wszystko, co niebieskie — akcenty, obwódki pól, poświaty, obrysy fokusu — ma być tym samym #2763c5. Jedyny wyjątek to ramki okna i notatnika, które mają własny, rozrzedzony odcień wpisany wprost w regułę. */ --color-primary-bright: #2763c5; --color-accent: #0ea5b7; /* turkus — drugorzędny akcent (statusy, ikony) */ /* --- Tła --- */ --color-bg: #f4f7fb; /* tło strony */ --color-surface: #ffffff; /* karty, panele */ --color-surface-alt: #eef3f9; /* delikatne wyróżnienie w karcie */ --color-border: #dde5f0; --color-border-strong: #c3d0e2; /* --- Tekst --- */ --color-text: #16233b; /* ciemny szaro-granatowy — tekst główny */ --color-text-muted: #5b6b85; --color-text-inverse: #ffffff; /* --- Sygnały --- */ --color-success: #2e9e5b; --color-warning: #d08a2c; --color-danger: #c0432f; /* --- Ciemne elementy (obudowa telefonu, ekran asystenta głosowego) --- */ --color-ink: #030712; --color-ink-soft: #0b1220; /* --- Typografia --- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --- Kształt i głębia --- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(16, 35, 66, 0.06), 0 1px 3px rgba(16, 35, 66, 0.04); --shadow: 0 4px 16px rgba(16, 35, 66, 0.07), 0 1px 3px rgba(16, 35, 66, 0.05); --shadow-lg: 0 18px 48px rgba(16, 35, 66, 0.14); /* --- Rytm --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* --- Szkło (liquid glass) --- Dymki czatu i pasek wpisywania. Trzymane jako tokeny, bo to jedyne miejsce w projekcie, gdzie kolor jest półprzezroczysty z założenia — a przezroczystość musi być inna na jasnym tle niż na granacie. */ --szklo-bot: rgba(139, 120, 225, 0.2); --szklo-bot-krawedz: rgba(139, 120, 225, 0.42); --szklo-bot-tekst: #16233b; --szklo-user: rgba(60, 105, 195, 0.2); --szklo-user-krawedz: rgba(60, 105, 195, 0.45); --szklo-user-tekst: #16233b; --szklo-pasek-krawedz: rgba(22, 35, 59, 0.18); --szklo-pasek-tekst: #5b6b85; /* Filtry tła osobno dla każdego rodzaju szkła — to one, a nie kolor wypełnienia, decydują o barwie dymka. Dymki noszą barwy dwóch poświat z tła: fiolet (poświata dolna) dla bota, granat (poświata górna) dla użytkownika. Surowe wartości poświat dawały jednak dymki różniące się o 23 punkty RGB — praktycznie ten sam kolor. Fiolet jest więc rozjaśniony, a granat zostawiony głęboki: zmierzona różnica rośnie wtedy do 74. Dymki to CIEMNE szkło: ich jasność (50 i 33) jest bliska tłu (6), a nie dwukrotnie wyższa. Wcześniejsza wersja rozjaśniała tło filtrem brightness(2.6) i wychodziły z tego jasne pastele. Efekt szkła niesie tu krawędź i połysk, nie rozjaśnione wypełnienie. Uwaga na przyszłość: same poświaty różnią się na ekranie tylko o 10 punktów RGB, więc dosłowne przepisanie ich barw dałoby dwa nierozróżnialne dymki. Rozdziela je jasność i to ona musi zostać. Filtr `grayscale` na tle odcina z niego barwę, żeby o kolorze dymka decydowało wypełnienie, a nie granat prześwitujący pod spodem. */ --szklo-filtr-bot: grayscale(0.6) brightness(1.04); --szklo-filtr-user: grayscale(0.6) brightness(1.04); --szklo-cien: 0 12px 40px rgba(16, 35, 66, 0.14); --szklo-polysk: rgba(255, 255, 255, 0.75); /* Rozmycie szkła — celowo ZEROWE. Gwiazdy w tle mają 3 px średnicy. Każde rozmycie większe od nich po prostu je kasuje: przy blur(8px) dymek był technicznie przezroczysty, ale nie było przez co patrzeć, bo tło pod nim zamieniało się w gładką plamę. Zmierzone: za typowym dymkiem 581×75 px stoi 6 gwiazdek. Szkło niesie tu więc krawędź, połysk i rozjaśnienie tła — nie rozmycie. Wartość zostaje jako pokrętło: 2–4 px zmiękczy obraz, 8 px znów zgasi gwiazdy. */ --szklo-blur: 0px; /* Rozjaśnienie tego, co pod szkłem. To ten parametr sprawia, że dymek czyta się jako szkło, a nie jako półprzezroczysta plama: gwiazdy za nim robią się jaśniejsze niż obok niego, więc widać, że coś przez niego prześwituje. Bez tego przy jednolitym granacie przezroczystości nie da się zauważyć, choćby krycie było minimalne. */ --szklo-jasnosc: 1.05; /* Dymki rozmowy — biały bot, niebieski klient. Kolor niesie rolę, nie ozdobę: pacjent pisze na niebiesko, asystent odpowiada na biało, tak jak w komunikatorze, z którego klinika korzysta na co dzień. */ --dymek-bot-tlo: #ffffff; --dymek-bot-tekst: #16233b; --dymek-bot-krawedz: rgba(22, 35, 59, 0.12); --dymek-user-tlo: #2763c5; --dymek-user-tekst: #ffffff; --dymek-user-krawedz: rgba(255, 255, 255, 0.16); --ease: cubic-bezier(0.22, 1, 0.36, 1); }