/* =====================================================================
   Motyw Kriofix (jasny): kolory i czcionki ze strony kriofix.turbourolog.pl
   Tło białe i lodowe, tekst w granacie marki (--ink), akcenty w lodowym błękicie (--cryo) i złocie (--gold).
   Fraunces (nagłówki) + Hanken Grotesk (tekst). Nakładka ładowana PO crm.css: nadpisuje tokeny i kilka
   miejsc ze sztywnym kolorem z wersji NFP. Przy synchronizacji z CRM NFP ten plik, jego link w index.html
   i favicon zostają (zob. README, sekcja Motyw).
   ===================================================================== */
:root {
  --tlo: #F3F9FD;
  --tlo-kratka: #E4F0F9;
  --karta: #FFFFFF;
  --karta-2: #F7FBFE;
  --ramka: #DCE9F4;
  --ramka-mocna: #B9D0E4;

  --tekst: #0A1322;          /* granat marki */
  --tekst-2: #4A5F7A;        /* kontrast z tłem > 4,5:1 */
  --tekst-3: #6F84A0;        /* tylko duży tekst i ozdobniki */

  --akcent: #5CC6F2;         /* lodowy błękit (cryo) */
  --akcent-ciemny: #2D86C4;  /* cryo-deep */
  --akcent-tekst: #1F6FA8;   /* błękit do małego tekstu i linków (kontrast > 4,5:1 na bieli) */
  --akcent-tlo: #E3F4FD;
  --na-akcencie: #0A1322;    /* granatowy tekst na błękicie */

  --zloto: #F1B868;
  --zloto-ciemne: #D98E45;
  --zloto-tekst: #8F5512;
  --zloto-tlo: #FFF3DC;

  --ok: #1E7A57;
  --ok-tlo: #E3F5EE;
  --blad: #B3261E;
  --blad-tlo: #FDECEA;
  --info: #1F6FA8;
  --info-tlo: #E3F4FD;
  --ostrz-tlo: #FFF3DC;

  --cien-1: 0 1px 2px rgba(10, 19, 34, .05);
  --cien-2: 0 6px 20px rgba(31, 90, 140, .10);
  --cien-3: 0 16px 48px rgba(10, 19, 34, .18);

  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

body {
  background-color: var(--tlo);
  background-image:
    radial-gradient(900px 380px at 12% -8%, rgba(92, 198, 242, .20), transparent 70%),
    radial-gradient(700px 340px at 96% 0%, rgba(241, 184, 104, .13), transparent 70%),
    linear-gradient(rgba(45, 134, 196, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 134, 196, .055) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
}
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
h1 em, h2 em { color: var(--zloto-ciemne); font-style: italic; }
:focus-visible { outline: 3px solid var(--akcent-ciemny); outline-offset: 2px; }

/* poświata błękitna zamiast pomarańczowej */
.menu a[aria-current="page"], .btn--glowny, .chip--on { box-shadow: 0 6px 16px rgba(45, 134, 196, .28); }
.wybor__btn--wybrany, .sprz--on { box-shadow: 0 6px 16px rgba(45, 134, 196, .20); }
a.kafel:hover { box-shadow: 0 8px 24px rgba(31, 90, 140, .14); }

/* obramowania pigułek (były ciepłe) */
.pig--nowe { border-color: #A9D8F2; }
.nw-info { border-color: #A9D8F2; }
tr.wiersz-nowy:hover td { background: #D2ECFA; }
.briefing { background: var(--karta-2); }
.przykladowe { border-color: #EBCB8C; }

/* wykresy: błękitna linia, wypełnienie gradientem znikającym ku dołowi */
.linia, .spark__linia { stroke-width: 2.5; }
.obszar { fill: url(#kfObszar); }
.ozyw .obszar { opacity: 1; }
.spark__pole { fill: url(#kfObszar); opacity: 1; }
.spark__linia { stroke: var(--akcent-ciemny); }
.mini { background: var(--karta-2); }

/* paski i wykresy: błękit lodowy */
.pasek-lejka span, .slupek__wart { background: linear-gradient(90deg, var(--akcent-ciemny), var(--akcent)); }

/* przełączniki profilu i aktywne zakładki: błękit marki zamiast czerni */
.profil--on, .ptog__b--on, .ptog__b--on:hover, .menu2 a[aria-current="page"] { background: var(--akcent-tekst); color: #fff; }
.menu a[aria-current="page"] .menu__licznik { background: var(--tekst); color: #fff; }

/* gorący / ciepły / chłodny lead */
.got--cieply, .chip--got-cieply.chip--on { background: var(--zloto); border-color: var(--zloto); color: #2b1c05; }
.got--chlodny { background: var(--akcent-tekst); color: #fff; }

/* złoty akcent drugorzędny */
.zloto { color: var(--zloto-tekst); }

@keyframes skok { 0% { box-shadow: 0 0 0 0 rgba(92, 198, 242, .7); background: var(--akcent); color: var(--na-akcencie); } 70% { box-shadow: 0 0 0 12px rgba(92, 198, 242, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 198, 242, 0); } }