:root {
  color-scheme: dark;
  --canvas: #10100f;
  --surface: #181816;
  --elevated: #211f1c;
  --border: #3a3732;
  --text: #f3f0ea;
  --muted: #aaa39a;
  --accent: #c87543;
  --focus: #f0a66d;
  --success: #68b884;
  --warning: #d5a95c;
  --danger: #df7770;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius-sm: .375rem;
  --radius-lg: 1rem;
  --elevation-2: 0 16px 42px rgba(0, 0, 0, .32);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --canvas: #f3f0ea;
    --surface: #fffdf9;
    --elevated: #ffffff;
    --border: #cec6bb;
    --text: #24211d;
    --muted: #665f56;
    --accent: #99502e;
    --focus: #7f3e22;
    --success: #287846;
    --warning: #8a6116;
    --danger: #a53834;
  }
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--canvas); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; }
.login-shell { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-4); }
.login-card { width: min(100%, 28rem); padding: clamp(var(--space-5), 6vw, 3rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elevation-2); }
.wordmark { margin: 0 0 var(--space-6); color: var(--accent); font-weight: 800; }
h1 { margin: 0; font-size: clamp(2rem, 10vw, 3.25rem); letter-spacing: -.05em; line-height: 1; }
.intro { margin: var(--space-3) 0 var(--space-5); color: var(--muted); }
form { display: grid; gap: var(--space-3); }
label { font-weight: 700; }
input, button { width: 100%; min-height: 48px; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
input { margin-bottom: var(--space-2); background: var(--canvas); color: var(--text); }
button { margin-top: var(--space-2); background: var(--accent); color: #17110d; font-weight: 800; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
input:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input[aria-invalid="true"] { border-color: var(--danger); }
.error { padding: var(--space-3); border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
[hidden] { display: none !important; }
@media (max-width: 640px) { .login-shell { align-items: start; padding-top: var(--space-5); } .login-card { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }