/*
 * File: login.css
 * Description: Styles for the login page and 404 page.
 */

.login-page main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--content-padding);
}

.login-card {
    --login-card-max-width: 380px;
    --login-title-size: 28px;

    width: 100%;
    max-width: var(--login-card-max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-medium);
    text-align: center;
}

.login-card h1 {
    font-size: var(--login-title-size);
    font-family: 'Roboto Mono', monospace;
    color: var(--accent-primary);
}

.login-description {
    color: var(--muted-text);
    font-size: var(--font-sm);
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
}

.login-form button {
    font-size: var(--font-base);
    font-weight: 500;
}

.flash-message {
    font-size: var(--font-sm);
    padding: var(--space-small) var(--space-medium);
    border-radius: var(--radius-sm);
    width: 100%;
}

.flash-error {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}

.back-link {
    font-size: var(--font-sm);
}