/* hosting/auth/style.css — the light face of the design system (lib/theme/stylab_tokens.dart). */
:root {
  --bg: #FFFFFF;        /* n0 */
  --raised: #F5F5F5;    /* n100 */
  --border: #DBDBDB;    /* n300 */
  --border-subtle: #EFEFEF; /* n200 */
  --text: #262626;      /* n900 */
  --text-2: #707070;    /* n625: AA on white and on n100 */
  --cta: #D93A1E;       /* cta650: commitment fill, white label 4.59:1 */
  --danger: #B3261E;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 0 16px;
}
main { max-width: 440px; margin: 0 auto; padding: 56px 0 40px; }
.wordmark {
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 28px;
}
.card {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 28px 24px 24px;
}
h1 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; margin: 0 0 12px; outline: none; }
.text { margin: 0; color: var(--text-2); }
.text + .cta { margin-top: 24px; }
form { margin-top: 16px; display: grid; gap: 8px; }
label { font-size: 14px; font-weight: 500; color: var(--text); }
input[type="password"] {
  font: inherit; width: 100%; height: 52px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text);
}
input[type="password"]:focus { outline: 2px solid var(--text); outline-offset: 1px; border-color: var(--text); }
.rule { margin: 0; font-size: 13px; color: var(--text-2); }
.problem { margin: 0; font-size: 14px; color: var(--danger); min-height: 1.4em; }
.cta {
  font: inherit; font-weight: 600; font-size: 16px;
  width: 100%; height: 52px; margin-top: 8px;
  border: 0; border-radius: var(--radius);
  background: var(--cta); color: #FFFFFF; cursor: pointer;
}
.cta:disabled { opacity: 0.6; cursor: default; }
.cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.card[aria-busy="true"] h1 { color: var(--text-2); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .cta { transition: opacity 120ms ease; } }