/* web/public/brand.css - "Nature Distilled" design tokens + auth-page styles.
   The :root tokens are global (reused by marketing.css). Everything else is
   scoped under body.auth so the auth/card styles never leak into the full-width
   marketing pages (which style themselves via marketing.css under .mkt). */
:root {
  --sage: #7c8b6f;
  --sage-dark: #5f6e54;
  --cream: #f7f4ec;
  --terracotta: #c66b4e;
  --ink: #2c2a26;
  --muted: #6b6862;
  --radius: 16px;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* Global base: page colors apply everywhere. */
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
}

/* Auth pages (login + simple card pages) center a single card. */
body.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

body.auth .card {
  width: min(92vw, 380px);
  padding: 32px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(44, 42, 38, 0.08);
  text-align: center;
}

body.auth .wordmark { color: var(--sage-dark); font-size: 1.5rem; margin: 0 0 24px; }

body.auth .subhead { color: var(--muted); margin: 0 0 20px; }

body.auth form { display: flex; flex-direction: column; gap: 12px; }
body.auth input {
  padding: 12px 14px; border: 1px solid #e3ded2; border-radius: 12px;
  font: inherit; background: var(--cream);
}
body.auth input:focus { outline: 2px solid var(--sage); border-color: var(--sage); }

body.auth .primary {
  display: inline-block; padding: 12px 16px; border: none; border-radius: 12px;
  background: var(--terracotta); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; text-align: center;
}
body.auth .primary:hover { background: #b25c41; }

body.auth .error { color: var(--terracotta); font-size: 0.9rem; }
body.auth .hint { color: var(--muted); font-size: 0.85rem; margin-top: 12px; }
body.auth h2 { color: var(--sage-dark); }

body.auth .check { display: block; margin: 4px auto 20px; }
body.auth .success-msg { font-size: 1.05rem; line-height: 1.4; margin: 0 0 22px; color: var(--ink); }

body.auth .link {
  margin-top: 16px; border: none; background: transparent; color: var(--sage-dark);
  font: inherit; font-size: 0.9rem; cursor: pointer; text-decoration: underline;
}