/* Auth always uses a light palette, including native controls and redirect states. */
:root {
    color-scheme: light;
    --auth-background: #f9f9f9;
    --auth-ink: #121212;
    --auth-muted: #666;
    --auth-secondary: #777;
    --auth-marketing-ink: #4d4d4d;
    --auth-border: #d8d8d8;
    --auth-divider: #ddd;
    --auth-hover: #eee;
    --auth-primary-hover: #2c2c2c;
    --auth-error-background: #fbedeb;
    --auth-error-ink: #8e2520;
    --auth-success-background: #eaf3ed;
    --auth-success-ink: #285d39;
    --auth-logo-on-light: block;
    --auth-logo-on-dark: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--auth-ink);
    background: var(--auth-background);
    font-synthesis: none;
}
.auth-wordmark-link { display: flex; align-items: center; justify-content: center; width: min(100%, 320px); min-height: 44px; margin-inline: auto; border-radius: 4px; }
.auth-wordmark { width: 100%; height: auto; }
.auth-wordmark--on-light { display: var(--auth-logo-on-light); }
.auth-wordmark--on-dark { display: var(--auth-logo-on-dark); }
:focus-visible { outline-color: var(--auth-ink); }
.auth-subtitle, .auth-helper, .auth-bottom-links, dialog p { color: var(--auth-muted); }
.auth-login-option, .auth-secondary, input { color: var(--auth-ink); border-color: var(--auth-border); }
.auth-login-option:hover, .auth-secondary:hover { background: var(--auth-hover); }
.auth-panel-divider, input::placeholder, .auth-marketing-choice p { color: var(--auth-secondary); }
.auth-panel-divider::before, .auth-panel-divider::after { background: var(--auth-divider); }
.auth-primary { border-color: var(--auth-ink); background: var(--auth-ink); color: var(--auth-background); }
.auth-primary:hover { background: var(--auth-primary-hover); }
.auth-marketing-choice label { color: var(--auth-marketing-ink); }
.auth-marketing-choice input { accent-color: var(--auth-ink); }
.auth-inline-error.error { background: var(--auth-error-background); color: var(--auth-error-ink); }
.auth-inline-error.success { background: var(--auth-success-background); color: var(--auth-success-ink); }
.auth-bottom-links a + a { border-color: var(--auth-divider); }
.auth-redirect-loading .auth-redirect-loader, dialog { background: var(--auth-background); color: var(--auth-ink); }
.auth-redirect-loading-line { background: var(--auth-border); }
.auth-redirect-loading-line::after { background: var(--auth-ink); }
dialog { border-color: var(--auth-divider); }
@media (max-width: 600px) { .auth-wordmark-link { width: min(100%, 280px); } }