/* Design tokens. The designer fills these in; every page uses only these variables.
   Brand (D11): navy #09315D, accent teal #3BC1C6 (shapes only), teal text #0E7C80. */
:root {
  --color-bg: #F3F6FA;
  --color-surface: #FFFFFF;
  --color-text: #1F2A37;
  --color-text-muted: #5B6B7B;
  --color-brand: #09315D;
  --color-accent: #3BC1C6;
  --color-accent-text: #0E7C80;
  --color-border: #D5DEE8;
  --color-focus: #0E7C80;
  --color-error: #B42318;
  --color-error-bg: #FDECEA;
  --color-ok: #16794C;
  --color-ok-bg: #E7F6EE;
  --color-on-brand: #FFFFFF;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius: 8px;
  --shadow: 0 1px 3px rgba(9, 49, 93, 0.12);
  --tap: 44px;
}

/* Minimal base so the placeholder auth pages are usable before the designer pass. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5; }
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.auth-card { width: 100%; max-width: 400px; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-6) var(--space-5); }
.auth-logo { display: block; height: 40px; width: auto; margin-bottom: var(--space-5); }
.auth-title { font-size: var(--text-xl); margin: 0 0 var(--space-2); color: var(--color-brand); }
.auth-lede { margin: 0 0 var(--space-5); color: var(--color-text-muted); }
.auth-step[hidden], .auth-msg[hidden] { display: none; }
.field { margin-bottom: var(--space-4); }
.field-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.field-input { width: 100%; min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; background: var(--color-surface); color: var(--color-text); }
.field-input:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.field-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.btn { min-height: var(--tap); padding: 0 var(--space-5); border-radius: var(--radius); border: 1px solid var(--color-border); font: inherit; font-weight: 600; cursor: pointer; background: var(--color-surface); color: var(--color-text); }
.btn-primary { width: 100%; background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-link { background: none; border: 0; padding: 0; min-height: 0; color: var(--color-accent-text); text-decoration: underline; cursor: pointer; font: inherit; }
.auth-msg { padding: var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-4); }
.auth-msg-error { background: var(--color-error-bg); color: var(--color-error); }
.auth-msg-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.auth-foot { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.auth-foot a { color: var(--color-accent-text); }