body.login {
    background-color: var(--color-bg-secondary, #f5f5f5);
}

.login h1 {
    display: none;
}

.login.lcms-login-logo h1 {
    display: block;
}

.login form {
    background-color: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--input-radius, var(--button-radius, var(--border-radius, 8px)));
    box-shadow: none;
    padding: 26px 24px;
}

.login form label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, #101010);
}

.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary, #101010);
    background-color: var(--input-bg, var(--color-bg-secondary, #f5f5f5));
    border: 1px solid var(--color-border, #ccc);
    border-radius: var(--input-radius, var(--button-radius, var(--border-radius, 8px)));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login form input[type="text"]:focus-visible,
.login form input[type="password"]:focus-visible,
.login form input[type="email"]:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--color-brand-primary, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand-primary, #2563eb) 20%, transparent);
}

.login form .button-primary,
.login .button.button-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding, 0.75rem 1.75rem);
    line-height: 1.2;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--btn-primary-color, var(--color-text-on-brand, #fff));
    background: var(--btn-primary-bg, var(--color-brand-primary, #2563eb)) border-box;
    border: 1px solid var(--btn-primary-border, transparent);
    border-radius: var(--button-radius, 9999px);
    text-shadow: none;
    box-shadow: var(--shadow-btn, none);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.login form .button-primary:hover {
    background: var(--btn-primary-bg-hover, var(--color-brand-primary-hover, var(--color-brand-primary, #2563eb))) border-box;
    color: var(--btn-primary-color-hover, var(--button-color-hover, var(--color-text-on-brand, #fff)));
}

.login #login_error {
    border-left: 4px solid var(--color-error, oklch(0.637 0.237 25.331));
    border-radius: var(--input-radius, 8px);
}

.login .message,
.login .notice {
    border-left: 4px solid var(--color-brand-primary, #2563eb);
    border-radius: var(--input-radius, 8px);
}

.login #nav a,
.login #backtoblog a {
    color: var(--color-text-secondary, #6c757d);
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--color-brand-primary, #2563eb);
}

@media (prefers-reduced-motion: reduce) {
    .login form input,
    .login form .button-primary {
        transition: none;
    }
}