:root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
    font-optical-sizing: auto;
    line-height: 1.5;
    font-weight: 400;
    font-size: 15px;

    color-scheme: light dark;
    color: var(--font-color);
    background-color: var(--background-color);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --light-color: #e7edff;
    --dark-color: #0b0a0f;
    --background-color: light-dark(#e7edff, #0b0a0f);
    --foreground-color: light-dark(#f0f3ff, #17151e);
    --highlight-color: light-dark(oklch(0.833 0.061 287.073 / 50%), #2e2b4c);
    --hover-color: light-dark(oklch(0.833 0.061 287.073 / 75%), #3d3a66);
    --border-color: light-dark(#c5c3ef, #2e2b4c);
    --font-color: light-dark(var(--dark-color), var(--light-color));
    --success-color: light-dark(#74e82c, #b3ff92);
    --notice-color: light-dark(#2e89ff, #92c1ff);
    --warning-color: light-dark(#ffc229, #ffdf91);
    --danger-color: light-dark(#ff2929, #ff9191);
    --link: light-dark(#6b6bff, #9E9EFF);
    --accent-primary-color: #685bc4;
    --accent-secondary-color: #7b74cc;
    --accent-color: linear-gradient(to right, var(--accent-primary-color), var(--accent-secondary-color));

    --btn-radius: 1.25rem;
}

body {
    margin: 0;
}