/* Donna web: the pages behind emailed links. Colours follow design/tokens.json. */
:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --border: #e4ded5;
  --text: #1f1d1a;
  --text-2: #5e5952;
  --accent: #2d6a5a;
  --on-accent: #ffffff;
  --accent-soft: #e3efea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f;
    --surface: #1d1b17;
    --border: #2e2b26;
    --text: #f2eee7;
    --text-2: #b5aea3;
    --accent: #6fbfa8;
    --on-accent: #0f1a16;
    --accent-soft: #1b2b26;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/24px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}
main { width: 100%; max-width: 440px; padding: 64px 0; display: flex; flex-direction: column; gap: 24px; }
h1 { margin: 0; font-size: 34px; line-height: 40px; letter-spacing: -0.5px; font-weight: 600; }
h2 { margin: 0; font-size: 22px; line-height: 28px; letter-spacing: -0.2px; font-weight: 600; }
p { margin: 0; color: var(--text-2); }
a { color: var(--accent); }
form { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-2); letter-spacing: 0.2px; }
input {
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  min-height: 48px; padding: 0 12px;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button {
  font: inherit; font-weight: 600; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
}
button[disabled] { opacity: 0.5; cursor: default; }
.note { min-height: 24px; color: var(--text-2); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.card p { color: var(--text); }
ul { margin: 0; padding-left: 20px; color: var(--text-2); }
li + li { margin-top: 8px; }
code { font: 14px/20px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; color: var(--text); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { button { transition: opacity 160ms; } }
.logo { width: 56px; height: 56px; border-radius: 16px; }
button.quiet { background: transparent; color: var(--accent); }

/* Pages are centred; forms and cards keep left-aligned text inside. */
main { align-items: center; text-align: center; }
form, .card, ul, .note { width: 100%; text-align: left; }
.note { text-align: center; }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 52px; }
.pw .eye {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48px; min-height: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-2); border-radius: 8px;
}
.pw .eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
form > h2 { text-align: center; }