/* ==========================================================================
   HELPI — WARSTWA MOTYWU DLA OKNA CZATU
   Wyciąg z css/style.css serwisu Helpi. Zawiera wyłącznie to, co decyduje
   o wyglądzie wspólnym: krój pisma, tokeny kolorów i tryby dostępności.

   Czego tu CELOWO NIE MA:
   - resetu i typografii landingu (własny reset czatu ma pierwszeństwo),
   - klas układu strony (.card, .btn, .hero, .steps …) — kolidowałyby
     z nazwami klas aplikacji czatu,
   - reguły `body { padding-top: var(--a11y-bar-h) }` z arkusza głównego.
     W oknie czatu nie ma paska dostępności, więc ten padding dokładałby
     44 px pustki na górze. To najczęstszy błąd przy podpinaniu pełnego
     style.css wewnątrz iframe.
   - filtrów skali szarości i negatywu — patrz sekcja 5.

   Kolejność podpięcia w dokumencie czatu:
       <link rel="stylesheet" href="/css/helpi-theme.css">   <!-- najpierw -->
       <link rel="stylesheet" href="/css/czat.css">          <!-- potem    -->
   Odwrotna kolejność sprawi, że reset czatu nadpisze krój pisma.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. KRÓJ PISMA — hostowany na serwerze Helpi
   Inter na licencji SIL Open Font License 1.1 (treść w css/fonts/OFL.txt).
   Serwujemy go z własnej domeny, żeby strona nie łączyła się z serwerami
   Google i nie ujawniała im adresów IP użytkowników — nie ma więc czego
   obejmować zgodą i font ładuje się od razu, bez czekania na baner.

   ŚCIEŻKI SĄ WZGLĘDNE względem tego pliku CSS, nie względem dokumentu HTML.
   Jeśli plik leży w /css/, pliki fontów muszą leżeć w /css/fonts/.

   Podział latin / latin-ext jest istotny: polskie znaki diakrytyczne
   (ą, ć, ę, ł, ń, ś, ź, ż) leżą w zakresie latin-ext.
   -------------------------------------------------------------------------- */
/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin-ext.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;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin.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;
}


/* --------------------------------------------------------------------------
   2. TOKENY — MOTYW JASNY (domyślny)
   Identyczne nazwy i wartości jak w arkuszu głównym Helpi. Aplikacja czatu
   powinna kolorować się TYMI zmiennymi, nie własnymi wartościami — inaczej
   przełączenie motywu w pasku dostępności nie obejmie okna rozmowy.
   -------------------------------------------------------------------------- */
:root {
    --body-color: #272525;
    --heading-color: #000000;

    --accent: #f5b329;
    --accent-dim: #db990f;
    --accent-light: #ffcc42;
    --accent-bg: #fdeece;
    --accent-bg-light: #fef3dd;

    --border-color: #E5E0DF;
    --shape-border: #e3d4b4;

    --card-bg: #FFFFFF;
    --neutral-bg: #f2f2f2;

    --blue: #003D82;
    --blue-accent: #0166ac;
    --gold-card: #FFC107;

    /* Kontrast 4.5:1 (WCAG 1.4.3 AA) */
    --link-color: #754F06;
    /* Hover MUSI ciemnieć, nie jaśnieć — jaśniejszy wariant akcentu
       (--accent-dim) dawał na białym tle tylko 2,45:1, poniżej progu.
       Ten kolor ma 9,78:1. */
    --link-hover: #5c3e05;
    --focus-ring: #005fb8;

    --box-radius: 0.35em;
    --block-m: 1.125em;
}


/* --------------------------------------------------------------------------
   3. PODSTAWA DZIEDZICZENIA
   Krój ustawiamy na <html>, żeby elementy wstawiane poza <body> (portale,
   warstwy modali) też go dziedziczyły.
   -------------------------------------------------------------------------- */
html {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
    font-family: inherit;
    font-weight: 400;
    color: var(--body-color);
    background: var(--neutral-bg);
    line-height: 1.6;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s, font-size 0.2s;
}

/* Widoczny fokus klawiatury — wymóg WCAG 2.4.7. Kolor obwódki zmienia się
   razem z motywem (w wysokim kontraście na cyjan, w ciemnym na biały). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: 4px;
}


/* --------------------------------------------------------------------------
   4. TRYBY MOTYWU
   Klasę nakładamy na <html> ORAZ na <body> — tak robi to js/a11y.js Helpi
   (funkcja syncHtmlTheme). Selektor `.dark-mode` bez `html`/`body` z przodu
   zadziała w obu przypadkach.
   -------------------------------------------------------------------------- */

/* ---- Tryb ciemny --------------------------------------------------------- */
.dark-mode {
    --body-color: #e0e0e0;
    --heading-color: #ffffff;
    --border-color: #333333;
    --accent-bg: #2d2616;
    --link-color: #f5b329;
    /* W ciemnym motywie „mocniej" znaczy jaśniej — 11,09:1 na karcie */
    --link-hover: #ffcc42;
    --blue: #4a9eff;
    --blue-accent: #2684ff;
    --focus-ring: #ffffff;
    --card-bg: #1e1e1e;
    --neutral-bg: #121212;
}

/* ---- Wysoki kontrast (poziom AAA) ---------------------------------------
   Uwaga: same tokeny nie wystarczą. W tym trybie serwis Helpi dodatkowo
   nadaje każdemu wydzielonemu blokowi żółtą ramkę 2 px na czarnym tle
   (karty, przyciski, nagłówki sekcji). Po stronie czatu odpowiednikiem są
   dymki wiadomości, pole wpisywania i przyciski szybkich odpowiedzi —
   wzorzec do powtórzenia jest w sekcji 5 tego pliku. */
.high-contrast {
    --body-color: #FFFF00;
    --heading-color: #FFFF00;
    --border-color: #FFFF00;
    --accent: #FFFF00;
    --accent-dim: #FFFF00;
    --accent-light: #FFFF00;
    --accent-bg: #000000;
    --accent-bg-light: #000000;
    --link-color: #00FFFF;
    /* Biały, bo żółty zlewałby się z kolorem tekstu w tym trybie */
    --link-hover: #FFFFFF;
    --blue: #FFFF00;
    --blue-accent: #000000;
    --focus-ring: #00FFFF;
    --card-bg: #000000;
    --neutral-bg: #000000;
    --gold-card: #000000;
}


/* --------------------------------------------------------------------------
   5. WZORZEC DLA WYSOKIEGO KONTRASTU
   Do uzupełnienia po stronie czatu własnymi nazwami klas. Zasada z Helpi:
   każdy element, który w motywie jasnym odróżnia się TŁEM, w wysokim
   kontraście musi odróżniać się RAMKĄ — bo wszystkie tła robią się czarne.
   -------------------------------------------------------------------------- */
/*
.high-contrast .dymek-bota,
.high-contrast .dymek-uzytkownika,
.high-contrast .pole-wpisywania,
.high-contrast .przycisk-szybki {
    background: #000;
    border: 2px solid #ff0;
    color: #ff0;
}
.high-contrast .dymek-bota a { color: #00FFFF; }
*/


/* --------------------------------------------------------------------------
   6. POZOSTAŁE TRYBY DOSTĘPNOŚCI
   -------------------------------------------------------------------------- */

/* Wymuszone podkreślenie wszystkich linków w treści */
.a11y-underline a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Czytelna czcionka — bezszeryfowa, luźniejsza, bez ujemnego światła liter.
   UWAGA: reguła z `*` i `!important` obejmie także elementy z ikonami.
   Jeśli czat używa font-icons (Font Awesome, Material Icons), trzeba je
   wyłączyć z tej reguły, inaczej ikony zamienią się w prostokąty:
       .a11y-readable .material-icons { font-family: 'Material Icons' !important; }
   Ikony w formacie SVG nie mają tego problemu — i są zalecane. */
.a11y-readable,
.a11y-readable * {
    font-family: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: normal !important;
}
.a11y-readable p,
.a11y-readable li {
    line-height: 1.8 !important;
    word-spacing: 0.06em;
}

/* Powiększenie tekstu NIE jest tu klasą — serwis Helpi ustawia je jako
   font-size w procentach na <body>, z pięciostopniowej skali
   [100, 110, 120, 135, 150]. Aplikacja czatu musi więc wymiarować się
   jednostkami względnymi (em/rem), nie pikselami. Rozmiary podane w px
   nie zareagują na przyciski A+ / A− w pasku dostępności — to naruszenie
   WCAG 1.4.4 (Zmiana rozmiaru tekstu). */

/* SKALA SZAROŚCI I NEGATYW — ŚWIADOMIE POMINIĘTE.
   Serwis Helpi nakłada je jako `filter` na <body> strony nadrzędnej.
   Filtr CSS obejmuje wszystkich potomków elementu, łącznie z osadzonym
   <iframe>, więc okno czatu zostanie przefiltrowane automatycznie.
   Powtórzenie tych reguł wewnątrz czatu nałożyłoby efekt dwukrotnie —
   podwójny negatyw daje z powrotem oryginalne kolory. */