:root {
    color-scheme: light;
    --auth-bg: #f5f8fc;
    --auth-surface: #ffffff;
    --auth-ink: #101827;
    --auth-muted: #64748b;
    --auth-line: #dbe4ef;
    --auth-primary: #1d4ed8;
    --auth-primary-strong: #173ea5;
    --auth-primary-soft: #eaf1ff;
    --auth-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --auth-bg: #0b1220;
    --auth-surface: #111a2b;
    --auth-ink: #eef4ff;
    --auth-muted: #a7b5cc;
    --auth-line: #26344d;
    --auth-primary: #7aa2ff;
    --auth-primary-strong: #a9c1ff;
    --auth-primary-soft: rgba(122, 162, 255, 0.14);
    --auth-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

body {
    background:
        radial-gradient(circle at 10% 10%, rgba(29, 78, 216, 0.14), transparent 28rem),
        radial-gradient(circle at 90% 0%, rgba(24, 128, 56, 0.10), transparent 24rem),
        var(--auth-bg) !important;
    color: var(--auth-ink);
    padding: 24px 0;
}

.login-card,
.signup-card {
    background: var(--auth-surface) !important;
    color: var(--auth-ink);
    border: 1px solid var(--auth-line) !important;
    border-radius: 24px !important;
    box-shadow: var(--auth-shadow) !important;
}

.login-card h1,
.signup-card h1 {
    color: var(--auth-primary) !important;
    letter-spacing: -0.04em;
}

.login-card p,
.signup-card p,
.footer,
.divider {
    color: var(--auth-muted) !important;
}

.field label {
    color: var(--auth-ink);
}

.field input {
    background: color-mix(in srgb, var(--auth-surface) 92%, var(--auth-bg)) !important;
    color: var(--auth-ink);
    border-color: var(--auth-line) !important;
}

.field input:focus {
    outline: 0 !important;
    border-color: var(--auth-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-primary) 16%, transparent);
}

.btn-login,
.btn-main {
    background: linear-gradient(135deg, var(--auth-primary), var(--auth-primary-strong)) !important;
}

.btn-google {
    background: color-mix(in srgb, var(--auth-surface) 92%, var(--auth-bg)) !important;
    color: var(--auth-ink) !important;
    border-color: var(--auth-line) !important;
}

.divider::before,
.divider::after {
    background: var(--auth-line) !important;
}

.footer a {
    color: var(--auth-primary) !important;
}

@media (max-width: 520px) {
    body {
        align-items: start;
        padding: 16px 0;
    }

    .login-card,
    .signup-card {
        width: min(100% - 24px, 480px) !important;
        padding: 24px !important;
        border-radius: 18px !important;
    }
}