:root {

    --page-width: 1400px;

    /* spacing */
    --spacing-xs: .5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* radii */
    --radius-xs: 0.4rem;
    --radius-sm: 0.6rem;
    --radius-md: 0.8rem;
    --radius-lg: 1rem;
    --radius-xl: 1.2rem;

    /* font sizes */
    --font-size-xs: .8rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.2rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;

    /* text and background colors */
    --color-text: oklch(25.2% 0 0);
    --color-text-light: oklch(48.3% 0 0);
    --color-background: oklch(98% 0 0);
    --color-background-grey: oklch(90% 0 0);
    --color-border: oklch(89.8% 0 0);
    --color-primary: oklch(52.2% 0.177 256);

    /* theme colors */
    --theme-color-lightness: 68%;
    --theme-color-lightness-light: 92%;
    --theme-color-lightness-dark: 42%;

    --theme-color-chroma: .25;
    --theme-color-chroma-light: .25;
    --theme-color-chroma-dark: .25;

    /* category hue */
    --category-uncategorized:      0;
    --category-dfb:               40;
    --category-transfers:         80;
    --category-regionalliga:     120;
    --category-1-bundesliga:     160;
    --category-2-bundesliga:     200;
    --category-international:    240;
    --category-champions-league: 290;
    --category-frauenfussball:   330;

    --category-color: oklch(
            var(--theme-color-lightness) var(--theme-color-chroma) var(--category-hue)
    );
    --category-color__light: oklch(
            var(--theme-color-lightness-light) var(--theme-color-chroma-light) var(--category-hue)
    );
    --category-color__dark: oklch(
            var(--theme-color-lightness-dark) var(--theme-color-chroma-dark) var(--category-hue)
    );
}


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

html {
    font-size: 16px;
}

body {
    margin: 0;
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

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