:root {
    --color-accent: #1dafe8;
    --color-background: #f5f5f5;
    --color-content: #ffffff;
    --color-danger: #ea4336;
    --color-info: #0c77ed;
    --color-neutral: #000;
    --color-neutral-inverse: #fff;
    --color-outline: #ececec;
    --color-primary: #31afb4;
    --color-secondary: #ef798a;
    --color-success: #34a853;
    --color-text: #212529;
    --color-warning: #ed820c;
    --size-layout-gap: .5rem;
}

@media (min-width: 576px) {
    :root {
        --size-layout-gap: 1rem;
    }
}

:root[data-color-scheme="dark"] {
    color-scheme: dark;
    --color-background: #0a0a0a;
    --color-content: #1a1a1a;
    --color-text: #f0f0f0;
    --color-neutral: #fff;
    --color-neutral-inverse: #000;
    --color-outline: #333;
}