/* auth.css — Paper/ink theme for signup.html and login.html, matching the
   landing page (css/site.css). Loaded after each page's inline <style> so it
   overrides the old purple-glow look without rewriting the page markup. */

:root {
  --bg: #f4f1e8;
  --s1: #fbfaf5;
  --s2: #ebe6d8;
  --border: #d6cfbc;
  --border2: #e4dfd0;
  --t1: #17160f;
  --t2: #47443a;
  --t3: #77725f;
  --accent: #1f3fbf;
  --accent-dim: #e3e7f6;
  --red: #a4261b;
  --red-dim: #f6e4e1;
  --green: #1d6a3c;
  --r: 4px;
  --font-display: 'Newsreader', Georgia, serif;
}

body { background: var(--bg); color: var(--t1); }
body::before, body::after { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Nav (signup) */
nav { background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: none !important; }
.nav-logo, .auth-logo { font-family: 'Manrope', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: var(--t1) !important; }
.nav-logo span, .auth-logo span { color: var(--accent) !important; }
.nav-link { color: var(--t2) !important; }

/* Headings */
.page-eyebrow { font-family: 'JetBrains Mono', monospace; color: var(--t3) !important; letter-spacing: .08em !important; }
.page-title { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -0.015em !important; font-size: clamp(32px, 4.4vw, 42px) !important; line-height: 1.08 !important; }
.page-sub, .auth-sub { color: var(--t2) !important; }

/* Login card */
.auth-card {
  background: var(--s1) !important;
  border: 1px solid var(--t1) !important;
  border-radius: 4px !important;
  box-shadow: 6px 6px 0 var(--s2) !important;
}
.auth-card::before { display: none !important; }

/* Fields — inputs previously had no width in the signup grid, so they
   overflowed the column. */
.form-field { min-width: 0; }
.form-input, .field input {
  width: 100%;
  min-width: 0;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--t1) !important;
  font-size: 16px !important;
}
.form-input:focus, .field input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; }
.form-input::placeholder, .field input::placeholder { color: #a39d8a !important; opacity: 1 !important; }
.form-label, .field label { color: var(--t2) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }

/* Buttons */
.primary-btn, .auth-btn {
  background: var(--t1) !important;
  color: var(--bg) !important;
  border: 1px solid var(--t1) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: 'Manrope', system-ui, sans-serif !important;
  font-weight: 600 !important;
}
.primary-btn:hover, .auth-btn:hover { background: #000 !important; box-shadow: none !important; }
#resend-btn { background: transparent !important; color: var(--t1) !important; }
.google-btn { background: #fff !important; color: var(--t1) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; }
.google-btn:hover { background: var(--s1) !important; }

.auth-divider::before, .auth-divider::after { background: var(--border) !important; }
.err-box, .auth-err { background: var(--red-dim) !important; border: 1px solid #e3b8b2 !important; color: var(--red) !important; border-radius: 4px !important; }
.legal-note, .signin-prompt, .signup-link, .auth-link, .back-link { color: var(--t3) !important; }
.legal-note a, .signin-prompt a, .signup-link a { color: var(--accent) !important; }
.signup-link { border-top-color: var(--border) !important; }
#loading-overlay { background: var(--bg) !important; }