/* ═══════════════════════════════════════════════════════════════════════════
   Annotator v2 — auth pages (login + error)
   Self-contained: carries the v2 design tokens so login.html / error.html
   render in the warm v2 aesthetic without depending on the legacy
   static/style.css (now archived under old/).
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  --bg:           #FAF7F2;
  --bg-alt:       #F0EDE5;
  --bg-deep:      #E5E0D2;
  --text:         #1A1A1A;
  --text-muted:   #6E6A60;
  --text-dim:     #948E80;
  --rule:         #D8D2C2;
  --rule-strong:  #B8B1A0;
  --accent:       #B4543A;
  --accent-soft:  rgba(180, 84, 58, 0.10);
  --danger:       #A93B3B;
  --shadow:       0 2px 24px -8px rgba(60, 50, 30, 0.18);
}
:root[data-theme="dark"] {
  --bg:           #16161D;
  --bg-alt:       #1F1F28;
  --bg-deep:      #272732;
  --text:         #E8E6DF;
  --text-muted:   #9B958A;
  --text-dim:     #6E6E65;
  --rule:         #33323A;
  --rule-strong:  #45434D;
  --accent:       #D87A5C;
  --accent-soft:  rgba(216, 122, 92, 0.16);
  --danger:       #D27676;
  --shadow:       0 2px 24px -8px rgba(0, 0, 0, 0.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 32px 36px 36px;
  box-shadow: var(--shadow);
}

.auth-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.auth-title {
  font-family: 'Newsreader', serif;
  font-style: italic; font-weight: 500;
  font-size: 30px; line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.auth-subtitle {
  font-size: 14px; line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.auth-error {
  font-size: 13px; line-height: 1.45;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid var(--danger);
  border-radius: 3px;
  padding: 9px 12px;
  margin-bottom: 18px;
}

.auth-form { display: block; }

.auth-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.auth-input {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: 0.04em;
  padding: 11px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  margin-bottom: 18px;
  transition: border-color 120ms;
}
.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-btn {
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-weight: 600; font-size: 14px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: filter 120ms;
}
.auth-btn:hover { filter: brightness(1.06); }
.auth-btn:active { filter: brightness(0.96); }

.auth-foot {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 16px;
}

/* Error page: reuse the card; tint the leading rule with the danger colour. */
.auth-card--error { border-left: 3px solid var(--danger); }
.auth-card--error .auth-title { font-style: normal; font-size: 22px; }
.auth-message { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.auth-message code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  background: var(--bg-deep);
  padding: 1px 5px; border-radius: 3px;
}