/* /auth/login only (api/shell.py's render(extra_css=...)). The approved
 * design system (web/src/theme/tokens.css) applied to the one plain page
 * MIGRATION_PLAN §6 names explicitly — everything else server-rendered
 * (invite, denied, legal) stays deliberately undesigned, see pages.css.
 *
 * Values below are copied from tokens.css rather than shared with it: this
 * is a separate static file with no build step, and the CSP means nothing
 * here can be generated at request time. Keep the two in sync by eye if the
 * palette changes. Fonts are the system stack, not the self-hosted DM
 * Sans/Roboto Mono the SPA loads — this page has no figures worth setting
 * in mono, and pulling in the font pipeline for one page's body text isn't
 * worth the extra request on the one screen that has to work before
 * anything else has loaded.
 */

:root {
  color-scheme: light;
  --ss-bg: #f6f4ef;
  --ss-surface: #fdfcfa;
  --ss-surface-raised: #ffffff;
  --ss-surface-sunken: #edeae2;
  --ss-ink: #201e1a;
  --ss-ink-2: #5f5b52;
  --ss-border: #e4e0d6;
  --ss-border-strong: #8a8577;
  --ss-accent: #0c6b62;
  --ss-on-accent: #ffffff;
  --ss-debit: #c62828;
  --ss-radius-m: 10px;
  --ss-radius-l: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ss-bg: #171512;
    --ss-surface: #1f1d19;
    --ss-surface-raised: #262420;
    --ss-surface-sunken: #110f0d;
    --ss-ink: #ebe7de;
    --ss-ink-2: #a8a294;
    --ss-border: #35322b;
    --ss-border-strong: #6f6b60;
    --ss-accent: #7ed0c4;
    --ss-on-accent: #06231f;
    --ss-debit: #e39088;
  }
}

body.login {
  background: var(--ss-bg);
  color: var(--ss-ink);
  font-family:
    'DM Sans',
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}

body.login main {
  max-width: 26rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
}

body.login .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

body.login h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

body.login .tagline {
  color: var(--ss-ink-2);
  margin: 0;
}

body.login .card {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-l);
  padding: 1.5rem;
}

body.login .card > p:first-child {
  margin-top: 0;
}

body.login main > p:last-child {
  text-align: center;
  color: var(--ss-ink-2);
  font-size: 0.9rem;
  max-width: 32ch;
  margin: 1.5rem auto 0;
}

body.login .google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--ss-border-strong);
  border-radius: var(--ss-radius-m);
  background: var(--ss-surface-raised);
  color: var(--ss-ink);
  text-decoration: none;
  font-weight: 500;
}

body.login .google:hover {
  background: var(--ss-surface-sunken);
}

body.login .notice {
  border: none;
  border-radius: var(--ss-radius-m);
  background: color-mix(in srgb, var(--ss-debit) 10%, var(--ss-surface));
  color: var(--ss-debit);
}
body.login .notice-success,
body.login .notice-info {
  background: var(--ss-surface-sunken);
  color: var(--ss-ink);
}

body.login label {
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 1rem;
}

body.login input[type='text'],
body.login input[type='email'],
body.login input[type='password'] {
  border-color: var(--ss-border-strong);
  border-radius: var(--ss-radius-m);
  background: var(--ss-surface);
  color: var(--ss-ink);
}

body.login input:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 1px;
  border-color: transparent;
}

body.login button,
body.login .button {
  border: none;
  border-radius: var(--ss-radius-m);
  background: var(--ss-surface-sunken);
  color: var(--ss-ink);
  font-weight: 500;
}

body.login button:hover,
body.login .button:hover {
  background: color-mix(in srgb, var(--ss-ink) 8%, var(--ss-surface-sunken));
}

body.login .button-primary {
  background: var(--ss-accent);
  color: var(--ss-on-accent);
}

body.login .button-primary:hover {
  background: color-mix(in srgb, var(--ss-ink) 12%, var(--ss-accent));
}

body.login :focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 2px;
}

body.login .divider {
  color: var(--ss-ink-2);
}

body.login footer {
  text-align: center;
  color: var(--ss-ink-2);
}