:root {
    --s: .6rem;
    --unit: 1rem;
    --m: 1.3rem;
    --xl: 1.62rem;
    --xxl: 3rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground: {{ oomox.getColourForegroundDark() | default('#f0f6f6') | raw }};
        --background-hard: {{ oomox.getColourBackgroundHardDark() | default('#141216') | raw }};
        --background-card: {{ oomox.getColourBackgroundCardDark() | default('#131217') | raw }};
        --border: {{ oomox.getColourBorderDark() | default('#201f25') | raw }};
        --accent: {{ oomox.getColourAccentDark() | default('#5ddbcf') | raw }};
        --shadow: 0px 25px 42px -10px rgba(0, 0, 0, 0.09) !important;

        --shadow-inset-accent: inset 0 0 0 2px var(--accent);
        --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round;
        --gradient: linear-gradient(10deg, var(--border) 0, transparent 90%) !important;
        --gradient-backwards: linear-gradient(290deg, var(--border) 0, var(--background-card) 100%) !important;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --foreground: {{ oomox.getColourForegroundLight() | default('#09090d') | raw }};
        --background-hard: {{ oomox.getColourBackgroundHardLight() | default('#ebebeb') | raw }};
        --background-card: {{ oomox.getColourBackgroundCardLight() | default('#f0f0f0') | raw }};
        --border: {{ oomox.getColourBorderLight() | default('#d5d5d5') | raw }};
        --accent: {{ oomox.getColourAccentLight() | default('#a22430') | raw }};
        --shadow: 0px 25px 42px -10px rgba(1, 1, 1, 0.09) !important;

        --shadow-inset-accent: inset 0 0 0 2px var(--accent);
        --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round;
        --gradient: linear-gradient(10deg, var(--background-hard) 0, transparent 60%) !important;
        --gradient-backwards: linear-gradient(290deg, var(--background-hard) 0, var(--background-card) 100%) !important;
    }
}