/* ==========================================================
   Wspólna paleta i podstawy - katalog karteczek (wersja jasna)
   ========================================================== */

:root {
    --tlo: #e3e6d9;
    --tlo-2: #d7dbc8;
    --karta: #f5efdf;
    --karta-cien: #e3d8bb;
    --atrament: #2a211b;
    --atrament-jasny: #5a4f44;
    --mosiadz: #b08d57;
    --mosiadz-ciemny: #7a5a2e;
    --mech: #5c6b4f;
    --mech-jasny: #eef0e6;
    --czerwien: #c23b4d;
    --czerwien-ciemna: #a02e3e;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100vh;
}

body {
    background:
        radial-gradient(circle at 15% 0%, var(--tlo-2), transparent 55%),
        radial-gradient(circle at 85% 100%, var(--tlo-2), transparent 50%),
        var(--tlo);
    font-family: 'Source Serif 4', Georgia, serif;
    color: var(--atrament);
}

/* --- Nagłówek / tabliczka marki (wspólny dla logowania i panelu) --- */
.marka .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mosiadz-ciemny);
    margin: 0 0 6px;
}

.marka h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--atrament);
}

a.wyloguj {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--mosiadz-ciemny);
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    margin-top: 10px;
}

a.wyloguj:hover,
a.wyloguj:focus-visible {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--mosiadz-ciemny);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}