/* ============================================
   app-auth.css
   ============================================
   Authentication page styles including auth pages,
   auth cards, and related forms.
   ============================================ */

/* ── Auth pages ─────────────────────────────────────────────────── */
.auth-page { display: flex; justify-content: center; align-items: flex-start; padding: 2rem 1rem; }
.auth-card { background: var(--color-surface-card); border: var(--border-default); border-radius: var(--radius-container); padding: 2rem 2rem 1.5rem; width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.brand-accent { color: var(--accent); }
.auth-brand-name { font-size: 1.8rem; font-weight: var(--wp-weight-bold); color: var(--color-text-primary); margin: 0 0 0.25rem 0; }
.auth-brand-tagline { font-size: var(--wp-text-base); color: var(--color-text-tertiary); margin: 0; }
.auth-form .form-group { margin-bottom: 1rem; }
.auth-form label { display: block; font-size: var(--wp-text-sm); font-weight: var(--wp-weight-semibold); color: var(--color-text-secondary); margin-bottom: 0.35rem; }
.auth-form input[type="email"], .auth-form input[type="password"] { display: block; width: 100%; padding: 0.6rem 0.75rem; border: var(--border-emphasis); border-radius: var(--radius-element); font-size: var(--wp-text-base); background: var(--color-surface-input); color: var(--color-text-primary); transition: border-color 0.15s; }
.auth-form input:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.btn-full { width: 100%; padding: 0.75rem 1rem; font-size: var(--wp-text-base); margin-top: 0.5rem; border-radius: var(--radius-element); min-height: 48px; }
.auth-alt-link { text-align: center; font-size: var(--wp-text-sm); color: var(--color-text-tertiary); margin: 1rem 0 0; }
.auth-alt-link a { color: var(--color-primary); font-weight: var(--wp-weight-semibold); text-decoration: none; }
.auth-alt-link a:hover { text-decoration: underline; }
.auth-brand-icon { width: 64px; height: 64px; margin-bottom: 0.75rem; }
.auth-divider { border: none; border-top: var(--border-default); margin: 1rem 0 0; }
.auth-hint { font-size: var(--wp-text-sm); color: var(--color-text-tertiary); margin: 0.35rem 0 0; }