:root {
    --content-size: 1.25rem;
    --content-size-sm: 1rem;
    --content-line-height: 1.5;
    --content-width: 52.5rem;
    --content-padding: 0.65rem;
    --bg-color: hsl(0deg 0% 100%);
    --content-color: hsl(0deg 0% 20%);
    --content-color-faded: #555;
    --heading-color: hsl(0deg 0% 27%);
    --primary-color: hsl(202deg 72% 28%);
    --primary-color-faded: hsl(202deg 14% 36%);
    --accent-color: hsl(0deg 92% 29%);
    --accent-color-faded: hsl(0deg 25% 55%);
    --nav-hover: hsl(0deg 0% 0% / 10%);

    @media(max-width: 640px) {
        --content-line-height: 1.25;
        --content-size: 1.15rem;
        --content-size-sm: 0.9rem;
    }

    @media(prefers-color-scheme: dark) {
        --bg-color: hsl(160deg 15% 9%);
        --content-color: hsl(100deg 8% 78%);
        --content-color-faded: hsl(110deg 5% 52%);
        --heading-color: hsl(45deg 20% 90%);
        --primary-color: hsl(155deg 30% 35%);
        --primary-color-faded: hsl(155deg 20% 14%);
        --accent-color: hsl(340deg 45% 65%);
        --accent-color-faded: hsl(340deg 20% 50%);
        --nav-hover: hsl(155deg 15% 100% / 10%);
    }
}