/* Motyw materiałów „Rozmowa, która pomaga” na chybicki.pl.
 * JEDYNE miejsce z kolorami i fontem (plik marki: scripts/synchronizuj-ppp.mjs go nie nadpisuje).
 * Tokeny z chybicki/src/styles/global.css: granat #12223B i #263F67, niebieski #0072AD, akcenty #00BFFF i #FB1A8F
 * (tylko grafika), różowy do tekstu #C8106F, tła #FAFBFD / #EAF6FD / #F1F4F8, Literata + DM Sans.
 * Kolor pilny #A80F5E (malina) to przyciemniona pochodna różowego #FB1A8F.
 *
 * Kontrast WCAG 2.1 (AA: tekst ≥ 4.5:1, grafika i fokus ≥ 3:1), zmierzony dla par użytych w tekście.
 * Kolumny: biel / --tlo #FAFBFD / --kolor-glowny-jasny #EAF6FD / --akcent-jasny #F1F4F8 / własne tło.
 *   --kolor-glowny  #12223B  15.9 / 15.4 / 14.5 / 14.4        (nagłówki, numery, etykiety)
 *   --kolor-glowny-ciemny #263F67  10.6 / 10.2 / 9.6 / 9.6     (chipy, nagłówki tabel)
 *   --kolor-link i --kolor-przycisk #0072AD  5.2 / 5.1 / 4.8 / 4.7  (linki, obrys przycisków)
 *   --tekst         #1E2533  15.4 / 14.8 / 14.0 / 13.9
 *   --tekst-drugi   #55607A   6.3 / 6.1 / 5.7 / 5.7
 *   --pilne         #A80F5E   7.3 / 7.0 / 6.6 / 6.6 / 6.6 na --ryzyko-tlo   (numery alarmowe, kryzys)
 *   --ok            #1D7A4A   5.3 / 5.2 / 4.9 / 4.8 / 4.9 na --ok-tlo
 *   --czesc         #263F67  10.6 / 10.2 / 9.6 / 9.6 / 9.4 na --czesc-tlo
 *   --ryzyko        #C8106F   5.6 / 5.4 / 5.1 / 5.1 / 5.0 na --ryzyko-tlo
 *   biel na: --kolor-glowny 15.9 (pasek tytułowy, stopka), --kolor-przycisk 5.2, --pilne 7.3, --kolor-glowny-ciemny 10.6.
 *   --tekst na --zaznaczenie #C4EEFF 12.4 (wyróżnienie w wynikach wyszukiwania), na --akcent 7.2 (przycisk filmu).
 *   Fokus --tusz #FB1A8F (jak na chybicki.pl): 3.7 na bieli, 3.6 na --tlo, 4.3 na granacie.
 *   --akcent #00BFFF i --akcent-drugi #FB1A8F mają z bielą 2.1 i 3.7: tylko grafika (plamy, kółka, linie), nie tekst.
 */
:root {
  --kolor-glowny: #12223b;        /* granat: nagłówki, pasek tytułowy, stopka, numery */
  --kolor-glowny-ciemny: #263f67; /* granat jaśniejszy */
  --kolor-glowny-jasny: #eaf6fd;  /* mgła: tła wyróżnień */
  --kolor-link: #0072ad;          /* niebieski: linki */
  --kolor-przycisk: #0072ad;      /* niebieski: przyciski (nakładka niżej) */
  --akcent: #00bfff;              /* błękit: tylko grafika */
  --akcent-drugi: #fb1a8f;        /* różowy: tylko grafika */
  --akcent-jasny: #f1f4f8;        /* chmura: tło ramek (kontakt, „dla przełożonego”, profil) */
  --zaznaczenie: #c4eeff;         /* tło <mark> w wynikach wyszukiwania */
  --pilne: #a80f5e;               /* malina: pomoc pilna, kryzys, numery alarmowe */
  --tusz: #fb1a8f;                /* ramka fokusu (jak na chybicki.pl) */

  --tlo: #fafbfd;                 /* papier */
  --powierzchnia: #ffffff;
  --tekst: #1e2533;
  --tekst-drugi: #55607a;
  --linia: #d8dee8;

  /* oceny w quizie (jak w quizach chybicki.pl): tekst na własnym tle 4.9, 9.4 i 5.0:1 */
  --ok: #1d7a4a;      --ok-tlo: #eef8f2;
  --czesc: #263f67;   --czesc-tlo: #eef2f8;
  --ryzyko: #c8106f;  --ryzyko-tlo: #fdf0f6;

  /* ikony (assets/ikony.svg): kontur granatowy, plama różowa (grafika) */
  --ikona-kolor: var(--kolor-glowny);
  --ikona-akcent: #ffd6ea;
  --ikona-tlo: #ffffff;

  --font: 'DM Sans Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-naglowki: 'Literata Variable', Georgia, 'Times New Roman', serif;
  --promien: 12px;
  --cien: 0 1px 2px rgb(18 34 59 / 0.07), 0 8px 24px rgb(18 34 59 / 0.07);
}

/* ---------- nakładka chybicki.pl na styl.css (typografia, przyciski, akcenty, powrót na stronę główną) ----------
 * styl.css ładuje się PO tym pliku, więc selektory mają prefiks „html” (wyższa specyficzność). */
html h1, html h2, html h3, html .marka b { font-family: var(--font-naglowki); font-weight: 600; letter-spacing: 0; }
html .hero h1, html .a4 h1 { font-weight: 500; letter-spacing: -0.01em; }
html .sytuacja { font-family: var(--font); font-weight: 600; } /* długi opis sytuacji w quizie i pytanie przewodnika: krój tekstowy */
html .przycisk, html .dialog-wybor button, html .wersje button { border-color: var(--kolor-przycisk); color: var(--kolor-przycisk); }
html .przycisk.glowny, html .dialog-wybor button[aria-pressed=true], html .wersje button[aria-pressed=true] { background: var(--kolor-przycisk); color: #fff; }
html .hero::after { border-color: var(--akcent-drugi); opacity: .32; }
html .kafelek::before { background: var(--akcent-drugi); }
html .szukaj-lista mark { background: var(--zaznaczenie); }

/* powrót na chybicki.pl: ensō jak w nagłówku strony; na telefonie sam znak, a ikona materiałów znika, żeby zmieścił się tytuł */
html .do-domu { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; min-width: 44px; justify-content: center;
  padding-right: 12px; margin-right: 2px; border-right: 1px solid var(--linia); color: var(--kolor-glowny); text-decoration: none;
  font-family: var(--font-naglowki); font-weight: 600; font-size: .95rem; }
html .do-domu:hover .do-domu-tekst { text-decoration: underline; text-underline-offset: 3px; }
html .enso { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--kolor-przycisk); border-right-color: var(--akcent-drugi); transform: rotate(-30deg); flex: none; }
html .top .wrap > .marka { margin-right: auto; }
@media (max-width: 759px) { html .do-domu-tekst { display: none; } html .do-domu { padding-right: 10px; } }
@media (max-width: 480px) {
  html .marka .ikona { display: none; }
  html .top .wrap { gap: 8px; }
  html .prawa-strona { gap: 5px; }
  html .do-domu { min-width: 32px; padding-right: 8px; }
  html .marka b { font-size: .84rem; line-height: 1.15; white-space: normal; overflow-wrap: normal; word-break: normal; }
  html .marka small { font-size: .72rem; white-space: nowrap; }
}
@media (max-width: 380px) { html .marka small { display: none; } html .marka b { font-size: .78rem; } html .jezyki a { padding: 6px 8px; } }
@media (max-width: 340px) { html .marka b { font-size: .72rem; hyphens: auto; overflow-wrap: break-word; } }