/* System wizualny przeniesiony z interaktywnej tablicy Mendelejewa.
   Podstrony hubu mają dzięki temu tę samą paletę i ten sam przełącznik motywu
   co tablica, zamiast własnych, obcych kolorów.

   Wartości pochodzą z żywej aplikacji (są tam wstrzykiwane przez JS, więc nie dało
   się ich po prostu skopiować ze źródła pliku). Motyw „jasny" to :root, „ciemny"
   to [data-motyw="ciemny"], a „auto" idzie za ustawieniem systemu. */

:root{
  --tlo:oklch(0.978 0.004 95);--tlo2:oklch(1 0 0);--tlo3:oklch(0.955 0.005 95);
  --tekst:oklch(0.245 0.012 265);--tekst2:oklch(0.525 0.014 265);--tekst3:oklch(0.66 0.012 265);
  --linia:oklch(0.9 0.006 265);--linia2:oklch(0.83 0.008 265);
  --akcent:oklch(0.52 0.13 252);
  --cien:0 10px 22px -12px oklch(0.3 0.03 265/.5);--cien2:0 1px 2px oklch(0.3 0.03 265/.08);
  --H:265;--ruch:170ms;
  --nkml-tlo:#fbf7f1;--nkml-tlo2:#ffffff;--nkml-hover:#eaf0f6;--nkml-marka:#1a3a5c;
  --nkml-txt:#26384a;--nkml-slaby:#5c6b7a;--nkml-linia:#eadfcb;
  --nkml-akc:#f4a228;--nkml-akc-h:#e0901a;--nkml-cta:#f4a228;--nkml-cta-txt:#26384a;
  --nkml-cta-cien:0 6px 14px rgba(244,162,40,.26);
  --nkml-st-tlo:#1a3a5c;--nkml-st-txt:#cbd8e6;--nkml-st-naglowek:#ffffff;
  --nkml-st-slaby:#9fb2c7;--nkml-st-linia:rgba(255,255,255,.12);
}

[data-motyw="ciemny"]{
  --tlo:oklch(0.168 0.008 265);--tlo2:oklch(0.212 0.009 265);--tlo3:oklch(0.24 0.01 265);
  --tekst:oklch(0.935 0.006 265);--tekst2:oklch(0.685 0.012 265);--tekst3:oklch(0.56 0.012 265);
  --linia:oklch(0.3 0.01 265);--linia2:oklch(0.38 0.012 265);
  --akcent:oklch(0.76 0.11 252);
  --cien:0 10px 24px -12px oklch(0 0 0/.7);--cien2:0 1px 2px oklch(0 0 0/.3);
  --nkml-tlo:oklch(0.212 0.009 265);--nkml-tlo2:oklch(0.24 0.01 265);
  --nkml-hover:oklch(0.3 0.014 252);--nkml-marka:oklch(0.945 0.006 265);
  --nkml-txt:oklch(0.935 0.006 265);--nkml-slaby:oklch(0.685 0.012 265);
  --nkml-linia:oklch(0.32 0.012 265);
  --nkml-akc:oklch(0.79 0.13 72);--nkml-akc-h:oklch(0.86 0.11 78);
  --nkml-cta:oklch(0.79 0.13 72);--nkml-cta-txt:oklch(0.19 0.03 72);
  --nkml-cta-cien:0 6px 14px oklch(0 0 0/.45);
  --nkml-st-tlo:oklch(0.192 0.009 265);--nkml-st-txt:oklch(0.735 0.012 265);
  --nkml-st-naglowek:oklch(0.95 0.006 265);--nkml-st-slaby:oklch(0.62 0.012 265);
  --nkml-st-linia:oklch(0.32 0.012 265);
}

/* Motyw „auto" — gdy użytkownik nie wybrał ręcznie, idziemy za systemem. */
@media (prefers-color-scheme: dark){
  [data-motyw="auto"]{
    --tlo:oklch(0.168 0.008 265);--tlo2:oklch(0.212 0.009 265);--tlo3:oklch(0.24 0.01 265);
    --tekst:oklch(0.935 0.006 265);--tekst2:oklch(0.685 0.012 265);--tekst3:oklch(0.56 0.012 265);
    --linia:oklch(0.3 0.01 265);--linia2:oklch(0.38 0.012 265);
    --akcent:oklch(0.76 0.11 252);
    --cien:0 10px 24px -12px oklch(0 0 0/.7);--cien2:0 1px 2px oklch(0 0 0/.3);
    --nkml-tlo:oklch(0.212 0.009 265);--nkml-tlo2:oklch(0.24 0.01 265);
    --nkml-hover:oklch(0.3 0.014 252);--nkml-marka:oklch(0.945 0.006 265);
    --nkml-txt:oklch(0.935 0.006 265);--nkml-slaby:oklch(0.685 0.012 265);
    --nkml-linia:oklch(0.32 0.012 265);
    --nkml-akc:oklch(0.79 0.13 72);--nkml-akc-h:oklch(0.86 0.11 78);
    --nkml-cta:oklch(0.79 0.13 72);--nkml-cta-txt:oklch(0.19 0.03 72);
    --nkml-st-tlo:oklch(0.192 0.009 265);--nkml-st-txt:oklch(0.735 0.012 265);
    --nkml-st-naglowek:oklch(0.95 0.006 265);--nkml-st-slaby:oklch(0.62 0.012 265);
    --nkml-st-linia:oklch(0.32 0.012 265);
  }
}

/* Baza strony — ta sama typografia i tło co w aplikacji. */
html{color-scheme:light dark}
body{
  margin:0;background:var(--tlo);color:var(--tekst);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Przełącznik motywu na podstronach — aplikacji tu nie ma, więc dajemy własny,
   zapisujący wybór w localStorage pod tym samym kluczem co tablica. */
.uo-motyw{
  position:fixed;right:14px;bottom:14px;z-index:60;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--linia);background:var(--tlo2);color:var(--tekst);
  font:600 12.5px/1 ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif;
  box-shadow:var(--cien2);transition:border-color var(--ruch),transform var(--ruch);
}
.uo-motyw:hover{border-color:var(--akcent);transform:translateY(-1px)}
.uo-motyw svg{width:15px;height:15px;flex:none}
@media print{.uo-motyw{display:none!important}}