:root {
    --bg: var(--bg-dark);
    --bg2: var(--bg2-dark);
    --fg: var(--fg-dark);
    --muted: var(--muted-dark);
    --acc: var(--acc-dark);
    --card: var(--card-dark);
    --acc-card: var(--acc-card-dark);
    --readability: var(--readability-dark);
    --topnav: var(--topnav-dark);
    --fg-contrast: var(--fg-contrast-dark);

    --bg-dark: rgb(16, 16, 17);
    --bg2-dark: rgb(30, 31, 32);
    --fg-dark: white;
    --muted-dark: #1a1a1a;
    --acc-dark: #2876be;
    --card-dark: #2b2b2b;
    --acc-card-dark: #424242;
    --readability-dark: rgba(0, 0, 0, 0.55);
    --topnav-dark: black;
    --fg-contrast-dark: black;

    --bg-light: #f1f1ff;
    --bg2-light: rgb(226, 227, 253);
    --fg-light: black;
    --muted-light: #e2e2e2;
    --acc-light: #7c7eff;
    --card-light: #c3c6f0;
    --acc-card-light: #9da7ff;
    --readability-light: rgba(255, 255, 255, 0.7);
    --topnav-light: white;
    --fg-contrast-dark: white;

    --font-family: 'Inter', sans-serif;
    --font: 'Inter', sans-serif;

    --s: 200px;
    --c1: var(--card);
    --c2: var(--bg);
    --c3: var(--bg2);
    --pattern-background:
        repeating-conic-gradient(from 30deg,
            #0000 90deg 120deg,
            var(--c3) 0deg 180deg) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
        repeating-conic-gradient(from 30deg,
            var(--c1) 0deg 60deg,
            var(--c2) 0deg 120deg,
            var(--c3) 0deg 180deg);

    --pattern-size: var(--s) calc(var(--s) * 0.577);
}

:root[data-theme="light"] {
    --bg: var(--bg-light);
    --bg2: var(--bg2-light);
    --fg: var(--fg-light);
    --muted: var(--muted-light);
    --acc: var(--acc-light);
    --card: var(--card-light);
    --acc-card: var(--acc-card-light);
    --readability: var(--readability-light);
    --topnav: var(--topnav-light);
    --fg-contrast: var(--fg-contrast-light);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: var(--bg-light);
        --bg2: var(--bg2-light);
        --fg: var(--fg-light);
        --muted: var(--muted-light);
        --acc: var(--acc-light);
        --card: var(--card-light);
        --acc-card: var(--acc-card-light);
        --readability: var(--readability-light);
        --topnav: var(--topnav-light);
        --fg-contrast: var(--fg-contrast-light);
    }
}