: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(220deg 18% 11%);
        --content-color: hsl(215deg 10% 78%);
        --content-color-faded: hsl(215deg 6% 55%);
        --heading-color: hsl(210deg 15% 90%);
        --primary-color: hsl(215deg 60% 50%);
        --primary-color-faded: hsl(220deg 30% 22%);
        --accent-color: hsl(45deg 85% 55%);
        --accent-color-faded: hsl(45deg 35% 50%);
        --nav-hover: hsl(210deg 30% 100% / 12%);
    }
}