:root {
    color-scheme: light;

    --font-sans: 'DM Sans', sans-serif;
    --font-japanese: 'M PLUS Rounded 1c';

    --font-xs: 0.75rem;
    --font-s: 0.875rem;
    --font-m: 1rem;
    --font-l: 1.125rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;
    --font-3xl: 3rem;

    --color-text: #222;
    --color-input-background: #f3f3f3;
    --color-input-selected: #999999;
    --color-border: #d4d4d4;
    --color-secondary-border: #e5e5e5;
    --color-popup-border: #c6c6c6;
    --color-background: #ffffff;
    --color-secondary-background: #f9f8f7;
    --color-tertiary-background: #eeeeee;
    --color-secondary-text: #666;
    --color-tertiary-text: #999;
    --color-sidebar-selected: #e6e6e6;
    --color-sidebar: #f9f8f7;

    --color-primary: #3c88da;

    --color-blue: #2e7aca;
    --color-red: #ff7768;
    --color-yellow: #ffc845;
    --color-green: #4bba41;
    --color-grey: #b0b0b0;
    --color-focused: #c6c6c6;

    --radius-xs: 0.375rem;
    --radius-s: 0.5rem;
    --radius-m: 0.75rem;

    --space-4xs: 0.125rem;
    --space-3xs: 0.25rem;
    --space-2xs: 0.375rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;
    --space-4xl: 8rem;

    --max-page-width: 60rem;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-text: #f0efed;
    --color-input-background: #070707;
    --color-input-selected: #777777;
    --color-border: #3a3a3a;
    --color-secondary-border: #2e2e2e;
    --color-popup-border: #4a4a4a;
    --color-background: #191919;
    --color-secondary-background: #1f1f1f;
    --color-tertiary-background: #2a2a2a;
    --color-secondary-text: #aaaaaa;
    --color-tertiary-text: #888888;
    --color-sidebar-selected: #333333;
    --color-sidebar: #222222;
    --color-primary: #5a9ee6;
    --color-blue: #5a9ee6;
    --color-red: #e15a4b;
    --color-yellow: #dfa400;
    --color-green: #16ab3b;
    --color-grey: #888888;
    --color-focused: #595959;
}

html {
    font-size: 16px;
    font-family: var(--font-sans);
    height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    font-size: var(--font-m);
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--color-text);
    background-color: var(--color-background);
}

html, body {
    height: 100%;
    overscroll-behavior: none;
}