/* ---------- Kolory bazowe ---------- */
:root {
    --bg: #fffaf5;
    --bg-card: #ffffff;
    --text: #443428;
    --text-soft: #7a6a5e;
    --primary: #ff8d55;
    --primary-dark: #e26d35;
    --shadow: rgba(0, 0, 0, .06);
    --border: #e7ded7;
    --card: #ffffff; /* tło kart (article, code, tabelka head)   */
    --muted: #f1f4fc;
    /* naprzemienne wiersze tabeli
 }

 /* ---------- Reset & typografia ---------- */

    * {
        box-sizing: border-box
    }

    html, body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.65;
    }

    a {
        color: var(--primary);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline
    }

    h1, h2, h3 {
        color: var(--primary);
    }

    h1 {
        font-size: 2rem;
        margin: .3em 0
    }

    h2 {
        font-size: 1.25rem;
        margin: 2em 0 .6em
    }

    /* ---------- Layout ---------- */

    .wrapper {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 24px
    }

    /* Header */

    .site-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 18px 0;
        box-shadow: 0 1px 3px var(--shadow);
    }

    .site-header nav a {
        margin-left: 24px;
        font-weight: 500
    }

    /* Logo w kółku */

    .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700
    }

    .logo img {
        width: 40px;
        height: 40px;
        border-radius: 50%
    }

    /* Card */

    .card {
        background: var(--bg-card);
        padding: 32px;
        border-radius: 12px;
        box-shadow: 0 2px 6px var(--shadow);
    }

    /* CTA przyciski */

    .btn {
        display: inline-block;
        padding: 12px 22px;
        border-radius: 8px;
        font-weight: 600;
        transition: .2s transform, .2s background;
    }

    .btn.primary {
        background: var(--primary);
        color: #fff
    }

    .btn.primary:hover {
        background: var(--primary-dark);
        transform: translateY(-2px)
    }

    .btn.outline {
        border: 2px solid var(--primary);
        color: var(--primary)
    }

    .btn.outline:hover {
        background: #fff4ed
    }

    /* Footer */

    footer {
        margin-top: 80px;
        padding: 32px 0;
        text-align: center;
        font-size: .9rem;
        color: var(--text-soft);
        border-top: 1px solid var(--border)
    }

    /* --------------------------------------------------
       DOKUMENTY PRAWNE / ARTICLE
    -------------------------------------------------- */

    .article {
        background: var(--card);
        padding: 32px 28px 40px;
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
    }

    @media (prefers-color-scheme: dark) {
        .article {
            box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
        }
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #0e1525;
            --text: #e6e8ee;
            --primary: #6f8cff;

            --card: #1c2437;
            --border: #2f3b53;
            --muted: #202a40;
        }
    }

    /* ------------ tabele ------------- */

    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-top: .6em;
        font-size: .95rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
    }

    th, td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }

    th {
        background: var(--card);
        font-weight: 600;
    }

    tr:nth-child(even) td {
        background: var(--muted);
    }

    tr:last-child td {
        border-bottom: none;
    }

    /* ------------ code ------------- */

    code {
        background: var(--card);
        color: var(--primary);
        padding: 2px 5px;
        border-radius: 4px;
        font-size: .9em;
    }
}