/**
 * Reset i style bazowe — SamoWolność / „Mózg w formie".
 * Ładowany zawsze razem z tokens.css. Zero wartości wpisanych wprost —
 * wyłącznie odwołania do zmiennych z tokens.css.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-text-link);
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Widoczny, spójny fokus klawiaturowy wszędzie — dostępność traktowana
   poważnie, nie tylko dla myszy. */
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* Zaznaczenie tekstu myszką — kolory marki zamiast domyślnego niebieskiego
   z przeglądarki. Drobiazg, ale to on zdradza, że strona jest zaprojektowana,
   a nie tylko poskładana z gotowych elementów. */
::selection {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============ Nagłówki wersalikowe — charakter marki ============ */
.heading-display {
    font-family: var(--font-display);
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-display);
    line-height: var(--line-height-tight);
}

.text-accent {
    font-family: var(--font-accent);
    font-weight: var(--font-weight-medium);
}

.text-muted {
    color: var(--color-text-muted);
}

/* ============ Kontener treści ============ */
.container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* ============ Szkło — klasa pomocnicza ============ */
/* Zawsze zaczynamy od nieprzezroczystego tła (zapasowe), rozmycie
   dokładamy tylko gdy przeglądarka je obsługuje. Punktowo: nawigacja,
   karty, modale — nie na każdym elemencie (sekcja 14 dok. wsadowego). */
.glass {
    background: var(--glass-fallback-bg);
    border: 1px solid var(--color-border);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass {
        background: var(--glass-bg);
        border-color: var(--glass-border);
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    }
}

.glass--inverse {
    background: var(--glass-fallback-bg-inverse);
    border-color: var(--color-border-on-inverse);
    color: var(--color-text-inverse);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass--inverse {
        background: var(--glass-bg-inverse);
        border-color: var(--glass-border-inverse);
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    }
}

/* ============ Odstęp na dolną nawigację mobilną ============ */
.has-bottom-nav {
    padding-bottom: var(--space-9);
}

/* ============ Warstwa zadania — szkło niemal wyłączone ============ */
/* Zabezpieczenie strukturalne zasady „cisza w zadaniu" z sekcji 14
   dokumentu wsadowego: nawet gdyby ktoś dodał .glass na ekranie zadania,
   efekt jest wyciszony do zapasowego, nieprzezroczystego tła. */
.layout-focus .glass {
    background: var(--glass-fallback-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--color-border);
}

/* ============ Wąska karta wyśrodkowana — formularze logowania itp. ============ */
.narrow-card {
    max-width: 28rem;
    margin-inline: auto;
}

/* ============ Odstępy — uzupełnienie skali tam, gdzie flow nie wystarcza ============ */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-3 { margin-bottom: var(--space-3); }

.max-w-form {
    max-width: 40rem;
}

/* Pionowy odstęp między bezpośrednimi dziećmi — zamiast marginesu
   na każdym elemencie z osobna. */
.stack > * + * {
    margin-top: var(--space-4);
}

.text-center {
    text-align: center;
}

/* ============ Rozmiary tekstu — modyfikatory do nagłówków ============ */
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Przewijanie w poziomie dla szerokich tabel — strona nigdy nie
   przewija się w poziomie jako całość. */
.table-scroll {
    overflow-x: auto;
}

/* ============ Utility — tylko dla czytników ekranu ============ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}