/* Reset, element bazowy i focus. Nie zna ani jednej wartosci — wszystko przychodzi
   ze skorki. Stoi osobno od skali typograficznej, bo ekran na tablecie bierze tylko
   ten plik: skorka ekranu dostarcza wtedy jedenascie tokenow zamiast trzydziestu trzech. */

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

/* Domyslne `[hidden] { display: none }` przegrywa z kazda regula na klasie, wiec
   element z `display: flex` w komponencie pozostawal widoczny mimo atrybutu.
   Ukrywanie ma znaczyc ukrycie niezaleznie od tego, czym element jest. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-lh);
    font-weight: var(--text-body-weight);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

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

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

:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: var(--focus-ring-offset);
}