@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');

:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
}

/* Pink Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --primary: #A682FF;
    --primary-hover: #715AFF;
    --primary-focus: rgba(216, 27, 96, 0.125);
    --primary-inverse: #FFF;
}

/* Pink Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #A682FF;
        --primary-hover: #715AFF;
        --primary-focus: rgba(216, 27, 96, 0.25);
        --primary-inverse: #FFF;
    }
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

h1 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
}