/*
 * Auth / single-card pages (login, password reset) — localtable v2.
 * Consumes tokens.css. Linked only on these pages, so styling body is safe.
 */

body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; margin: 0; padding: var(--s5); background: var(--paper);
}

.login-container {
    background: var(--surface); border: 1px solid var(--line);
    padding: var(--s6); border-radius: var(--r-lg); box-shadow: var(--sh-2);
    width: 100%; max-width: 420px;
}
.login-container h1 { margin: 0 0 var(--s2); color: var(--ink); font-size: var(--fs-h2); font-variation-settings: 'opsz' 48; }
.login-container > p { margin: 0 0 var(--s6); color: var(--ink-soft); }

.form-group { margin-bottom: var(--s5); }

.btn-login {
    width: 100%; padding: 13px; min-height: 48px;
    background: var(--primary); color: var(--on-primary);
    border: none; border-radius: var(--r-md); font-size: 1rem;
    font-family: var(--font-serif); font-weight: 600; cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.btn-login:hover { box-shadow: var(--sh-2); }

.error {
    background: var(--error-bg); color: var(--error); border: 1px solid var(--error);
    padding: var(--s4); border-radius: var(--r-sm); margin-bottom: var(--s4);
}

.password-reset { margin-top: var(--s4); text-align: center; }
.password-reset a { color: var(--dining); text-decoration: none; }
.password-reset a:hover { text-decoration: underline; }