/* ===========================
   2. Zmienne globalne - jasny motyw
=========================== */
:root {
    /* Layout */
    --font-main: Rubik-Bold, sans-serif;
    --font-secondary: Rubik, sans-serif;
    --font-scale: 1em;

    /* Kolory ogólne */
    --background-color: #fff;
    --heading-color: #222;
    --text-color: #444;
    --link-color: #3273dc;
    --visited-color: #275bb0;

    /* Kod / blockquote */
    --code-background-color: #f2f2f2;
    --code-color: #222;
    --code-border-color: #444;
    --blockquote-color: #222;

    /* Tabele */
    --table-background-color: #fff;
    --table-border-color: #666;
    --table-header-background: #f0f0f0;
    --table-row-even-background: #f2f2f2;
    --table-row-odd-background: var(--background-color);
    --table-cell-border: #444;
}

/* ===========================
   3. Dark mode
=========================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Fonty */
        --font-main: Rubik-Bold, sans-serif;
        --font-secondary: Rubik, sans-serif;
        --font-scale: 1em;

        /* Kolory ogólne */
        --background-color: #0D1B2A;
        --heading-color: #eee;
        --text-color: #ddd;
        --link-color: #8cc2dd;
        --visited-color: #6fa3bb;

        /* Kod / blockquote */
        --code-background-color: #000;
        --code-color: #ddd;

        /* Tabele */
        --table-background-color: #0F0F0F;
        --table-border-color: #444;
        --table-header-background: #111;
        --table-row-even-background: #101010;
        --table-row-odd-background: #0A0A0A;
    }
}

/* Jasny motyw (domyślny) */
html.light {
    --background-color: #fff;
    --heading-color: #222;
    --text-color: #444;
    --link-color: #3273dc;
    --visited-color: #275bb0;
}

/* Ciemny motyw */
html.dark {
    --background-color: #0D1B2A;
    --heading-color: #eee;
    --text-color: #ddd;
    --link-color: #8cc2dd;
    --visited-color: #6fa3bb;
}