/* Ciemny motyw podstron Hyżyk.
 *
 * Każda podstrona ma własny zestaw zmiennych CSS w swoim :root. Tu je
 * nadpisujemy — wystarczy jeden blok na rodzinę stron, bez dotykania
 * reguł każdej strony osobno. Wartości dobrane do palety z style.css
 * (dashboard), żeby oba wyglądały tak samo.
 *
 * Selektor to :root[data-motyw="ciemny"] — atrybut ustawia motyw.js
 * w <head>, przed pierwszym renderowaniem, więc nie ma białego błysku.
 *
 * Kolejność ma znaczenie: motyw-ciemny.css musi być ŁADOWANY PO
 * arkuszu strony, inaczej strona nadpisze te wartości swoim :root.
 */

:root[data-motyw="ciemny"] {
    /* Podstawowa paleta — wspólna dla wszystkich podstron */
    --ink: #ece9f7;
    --muted: #a9a3c2;
    --soft: #232034;
    --line: #38335a;

    --purple: #a08df0;
    --purple-dark: #c4b5ff;
    --purple-soft: #2c2547;

    --green: #6fd4ab;
    --green-soft: #17352a;
    --red: #f08a95;
    --amber: #e8b463;
    --amber-soft: #3a2d16;

    --terminal: #14131f;
    --terminal-ink: #e4e2f2;

    --shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

/* Twarde kolory w regułach stron. Każda rodzina dostaje tu nadpisania
 * tylko dla tych wartości, które faktycznie występują w jej CSS —
 * inaczej nadpisania niczego by nie zmieniły, a wprowadzałyby
 * zmienne nieużywane na tej stronie. */

/* ---- Strony kursu (22 pliki: materialy-web/kurs/czesc-01…20, projekt) ---- */
:root[data-motyw="ciemny"] body {
    background: linear-gradient(180deg, #17162a 0, #131222 420px);
    color: var(--ink);
}

:root[data-motyw="ciemny"] .card,
:root[data-motyw="ciemny"] .grid a {
    background: #1e1c30;
    border-color: var(--line);
}

:root[data-motyw="ciemny"] .card { box-shadow: var(--shadow); }
:root[data-motyw="ciemny"] .grid a { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }

:root[data-motyw="ciemny"] .home-button,
:root[data-motyw="ciemny"] .exlist a:hover,
:root[data-motyw="ciemny"] .nav a:hover,
:root[data-motyw="ciemny"] .grid a:hover {
    border-color: #4b4378;
}

:root[data-motyw="ciemny"] .exlist a:hover,
:root[data-motyw="ciemny"] .nav a:hover,
:root[data-motyw="ciemny"] .grid a:hover { background: var(--purple-soft); }

/* Ramki informacyjne: jasne tło z ciemnym tekstem na jasnym tle
 * byłyby nieczytelne po odwróceniu zmiennych. */
:root[data-motyw="ciemny"] .note {
    color: #8fd0f0;
    border-color: #24485e;
    background: #132430;
}

:root[data-motyw="ciemny"] .tip {
    color: #7fd8b3;
    border-color: #21503e;
    background: #12271f;
}

:root[data-motyw="ciemny"] .warning {
    color: #f09aa3;
    border-color: #5c2a31;
    background: #2c1418;
}

:root[data-motyw="ciemny"] .exam { border-color: #5b4420; }

:root[data-motyw="ciemny"] .prog span.ok {
    color: var(--green);
    border-color: #21503e;
    background: var(--green-soft);
}

/* Przycisk przełącznika motywem na podstronach */
:root[data-motyw="ciemny"] .theme-toggle {
    color: #ece9f7;
    border-color: #38335a;
    background: #23203a;
}

:root[data-motyw="ciemny"] .theme-toggle:hover {
    color: #fff;
    border-color: var(--purple);
    background: #2e2950;
}

/* ---- Strony INF.02 Linux (10 plików, osobny arkusz inf02-linux.css) ----
 * Te strony nie mają .card — treść leży w <section>. Mają też własne
 * .note/.tip/.warning z twardym tłem, terminal i .toc. */
:root[data-motyw="ciemny"] body {
    background: linear-gradient(180deg, #17162a 0, #131222 420px);
}

:root[data-motyw="ciemny"] section,
:root[data-motyw="ciemny"] .toc,
:root[data-motyw="ciemny"] .command-card {
    background: #1e1c30;
    border-color: var(--line);
}

:root[data-motyw="ciemny"] .note {
    color: #8fd0f0;
    border-color: #24485e;
    background: #132430;
}

:root[data-motyw="ciemny"] .tip {
    color: #7fd8b3;
    border-color: #21503e;
    background: #12271f;
}

:root[data-motyw="ciemny"] .warning {
    color: #f09aa3;
    border-color: #5c2a31;
    background: #2c1418;
}

:root[data-motyw="ciemny"] .hint {
    color: #b6c2dd;
    border-left-color: #4b6ea8;
    background: rgba(255, 255, 255, 0.03);
}

:root[data-motyw="ciemny"] .hint strong { color: #9ec5f0; }

:root[data-motyw="ciemny"] kbd {
    color: var(--ink);
    border-color: #4a4568;
    background: #26233c;
}

/* Terminal jest od zera ciemny, więc w ciemnym motywie zostaje bez zmian;
 * ramka musi tylko nie zlewać się z tłem strony. */
:root[data-motyw="ciemny"] .terminal { border-color: #3c3763; }

:root[data-motyw="ciemny"] .next-links a:hover,
:root[data-motyw="ciemny"] .exlist a:hover,
:root[data-motyw="ciemny"] .nav a:hover,
:root[data-motyw="ciemny"] .grid a:hover,
:root[data-motyw="ciemny"] .home-button:hover {
    border-color: #4b4378;
}

:root[data-motyw="ciemny"] .next-links a:hover { background: var(--purple-soft); }

:root[data-motyw="ciemny"] .mini-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

:root[data-motyw="ciemny"] .inline-code,
:root[data-motyw="ciemny"] .tool b {
    color: var(--purple-dark);
    background: var(--purple-soft);
}

:root[data-motyw="ciemny"] .home-button {
    color: var(--purple-dark);
    border-color: #4b4378;
    background: var(--purple-soft);
}

/* ---- Strony grafika / cmd / linux-terminal / php-inf03 ----
 * Te strony mają wspólny zestaw klas: .hero, .card, .role, .toc,
 * .exlist, .mini-table, .tools, .note/.tip/.warning. */
:root[data-motyw="ciemny"] body {
    background: linear-gradient(180deg, #17162a 0, #131222 460px);
}

:root[data-motyw="ciemny"] .card,
:root[data-motyw="ciemny"] .role,
:root[data-motyw="ciemny"] .toc {
    background: #1e1c30;
    border-color: var(--line);
}

/* .toc strong jest przyklejonym naglowkiem z jasnym tlem z artykul.css.
 * W ciemnym motywie zostawalo ono jasne, a tekst dziedziczyl jasny kolor
 * — napis "W materiale" znikal. Tlo musi byc takie jak panelu. */
:root[data-motyw="ciemny"] .toc strong {
    color: var(--ink);
    background: #1e1c30;
}

/* .role i .card nie miały ciemnego tła — biały tekst na białym tle.
 * .light-cell zostaje jasny celowo: pokazuje gradient i szachownicę,
 * więc tylko jego tekst musi wrócić do ciemnego koloru. */
:root[data-motyw="ciemny"] .light-cell {
    background: #f4f5fa;
    border-color: #38335a;
}

:root[data-motyw="ciemny"] .light-cell b { color: #202238; }
:root[data-motyw="ciemny"] .light-cell small { color: #6c7088; }

:root[data-motyw="ciemny"] .exlist a,
:root[data-motyw="ciemny"] .tools li,
:root[data-motyw="ciemny"] .grid a {
    background: #1e1c30;
    border-color: var(--line);
}

:root[data-motyw="ciemny"] .exlist a:hover,
:root[data-motyw="ciemny"] .tools li:hover,
:root[data-motyw="ciemny"] .grid a:hover,
:root[data-motyw="ciemny"] .nav a:hover,
:root[data-motyw="ciemny"] .next-links a:hover {
    background: var(--purple-soft);
    border-color: #4b4378;
}

:root[data-motyw="ciemny"] .exlist li.done .ex-num,
:root[data-motyw="ciemny"] .ex-num { background: var(--purple); }

:root[data-motyw="ciemny"] .mini-table th { background: rgba(255, 255, 255, 0.04); }
:root[data-motyw="ciemny"] .mini-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

:root[data-motyw="ciemny"] .tool b,
:root[data-motyw="ciemny"] .role b,
:root[data-motyw="ciemny"] .draft-badge { color: var(--purple-dark); }

:root[data-motyw="ciemny"] .tool b,
:root[data-motyw="ciemny"] .inline-code { background: var(--purple-soft); }

:root[data-motyw="ciemny"] .home-button {
    color: var(--purple-dark);
    border-color: #4b4378;
    background: var(--purple-soft);
}

/* .compare-card ma białe tło z palety strony, a tekst idzie z --ink,
 * więc w ciemnym motywie wyszedłby jasny tekst na białym tle. */
:root[data-motyw="ciemny"] .compare-card {
    background: #1e1c30;
    border-color: var(--line);
}

:root[data-motyw="ciemny"] .compare-card h4 { color: var(--purple-dark); }

/* Próbki kolorów: .swatch span dostawał białe tło od strony. */
:root[data-motyw="ciemny"] .swatch span {
    background: #232034;
    color: #ece9f7;
}

:root[data-motyw="ciemny"] .swatch { border-color: #38335a; }

/* ---- Fizyka: prezentacja slajdowa (.deck, .deckbar, .slide-inner) ----
 * Większość tych tło ma półprzezroczyste białe, co na ciemnym tle
 * jest w porządku. Nadpisuję tylko to, co naprawdę przygasło. */
:root[data-motyw="ciemny"] .deckbar {
    background: rgba(16, 15, 30, 0.94);
    border-color: #38335a;
}

:root[data-motyw="ciemny"] .deckbar .brand { color: #ece9f7; }
:root[data-motyw="ciemny"] .deckbar .brand span { color: #a9a3c2; }

:root[data-motyw="ciemny"] .nav-button,
:root[data-motyw="ciemny"] .button--ghost {
    color: #ece9f7;
    border-color: #38335a;
}

:root[data-motyw="ciemny"] .nav-button:hover { background: var(--purple-soft); }

:root[data-motyw="ciemny"] .slide-inner h1,
:root[data-motyw="ciemny"] .slide-inner h2 { color: #ece9f7; }

/* .title-answer ma twardy ciemny kolor tekstu na jasnym tle — w ciemnym
 * motywie zostawal nieczytelny. */
:root[data-motyw="ciemny"] .title-answer {
    color: #ece9f7;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #38335a;
}

:root[data-motyw="ciemny"] .title-answer strong { color: #ffd9a8; }

:root[data-motyw="ciemny"] .help-panel {
    color: #ece9f7;
    border-color: #38335a;
    background: #1e1c30;
}

/* Przycisk jest wspólny, więc jego styl musi działać w obu motywach. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #4d369c;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    border: 1px solid #d8d1f5;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

.theme-toggle:hover {
    color: #fff;
    border-color: var(--purple, #6950c7);
    background: var(--purple, #6950c7);
}