:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --page: #f7f5fa;
    --surface: #ffffff;
    --surface-soft: #f2eff5;
    --border: #e3dee8;
    --text: #201c24;
    --muted: #716a77;
    --primary: #252129;
    --danger: #b42318;
    --success: #166534;
}

body {
    background: var(--page) !important;
    color: var(--text) !important;
}

main,
article,
.empty {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    box-shadow: 0 .35rem 1.25rem #25182f0a !important;
    backdrop-filter: none !important;
}

.subtitle,
.alternate,
.help,
.count,
header p,
.empty p,
.no-colors {
    color: var(--muted) !important;
}

a {
    color: var(--text) !important;
}

input,
input[type="text"],
input[type="email"],
input[type="password"] {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

input:focus {
    border-color: #78717f !important;
    box-shadow: 0 0 0 .2rem #78717f1f !important;
}

button,
.button {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
}

button[type="submit"],
.primary,
dialog button[value="default"] {
    background: var(--primary) !important;
    color: #ffffff !important;
}

.mark {
    background: linear-gradient(135deg, #1f1b24, #77717d) !important;
    box-shadow: none !important;
}

.account {
    color: var(--muted) !important;
}

.notice {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
    color: var(--success) !important;
}

.error,
.field-error,
.danger,
.remove {
    color: var(--danger) !important;
}

.error {
    border-color: #fecaca !important;
    background: #fff7f7 !important;
}

.color,
.color-row {
    border-color: var(--border) !important;
    background: var(--surface-soft) !important;
    color: var(--text) !important;
}

.copy {
    color: var(--text) !important;
}

.swatch {
    border-color: #0000001f !important;
}

.icon-button {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

.drag {
    color: var(--muted) !important;
}

dialog {
    border-color: var(--border) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
}

dialog p {
    color: var(--muted) !important;
}

@media (max-width: 38rem) {
    body {
        padding: 1rem !important;
    }

    main {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }
}