/* ==========================================================================
   Sign-in page — visual system
   Owner: WP06 (static/login.css). login.html itself is owned by WP05/WP07.

   This file is self-contained (it does not assume static/app.css is also
   loaded) and repeats the same token layer, type scale and interaction
   rules from kitty-specs/erik-todo-app-01M2X0X2/contracts/visual-contract.md
   so the sign-in page and the app page are visually one system even though
   they may be served independently.

   COMPONENT CONTRACT for the markup:
     .login-shell        full-height centring wrapper
     .login-card          the centred card itself
     .login-card__title    heading
     .login-form           the form
     .login-field           label + input group
     .login-field__label
     .login-field__input
     .login-submit          submit button
     .login-error          error message region — always present in the
                           document (empty by default) and reserves height,
                           so showing a message never shifts the layout.
     .login-error--visible  applied when a message is present
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #FBFAF8;
  --surface: #FFFFFF;
  --fg: #1A1A18;
  --fg-dim: #57534E;
  --hairline: rgba(26, 26, 24, 0.08);
  --focus: #1D4ED8;
  --state-critical: #B91C1C;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  --transition-fast: 120ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #14151A;
    --surface: #1C1E25;
    --fg: #E8E6E1;
    --fg-dim: #A8A29E;
    --hairline: rgba(232, 230, 225, 0.10);
    --focus: #5078E8;
    --state-critical: #F1665F;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14151A;
  --surface: #1C1E25;
  --fg: #E8E6E1;
  --fg-dim: #A8A29E;
  --hairline: rgba(232, 230, 225, 0.10);
  --focus: #5078E8;
  --state-critical: #F1665F;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.login-shell {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

@media (max-width: 600px) {
  .login-shell {
    padding: var(--space-16);
  }
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: var(--space-32) var(--space-24);
}

.login-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-24);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-field__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-dim);
}

.login-field__input {
  min-height: 32px;
  padding: var(--space-8);
  font-family: inherit;
  font-size: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

.login-submit {
  min-height: 32px;
  padding: var(--space-8) var(--space-16);
  font-family: inherit;
  font-size: 15px;
  font-weight: 450;
  color: var(--surface);
  background: var(--fg);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Error region reserves its line-height up front (min-height, not display:
   none) so a 401/429/503 message never shifts the card's layout when it
   appears. The word ("Incorrect email or password.", the Retry-After value,
   the setup instruction) is always the primary carrier; colour reinforces
   it, never carries it alone. */
.login-error {
  min-height: 1.5em;
  font-size: 12px;
  color: var(--state-critical);
  border-left: 3px solid transparent;
  padding-left: var(--space-8);
}

.login-error--visible {
  border-left-color: var(--state-critical);
  font-weight: 500;
}

/* Focus ring, hit targets, motion — same rules as static/app.css. */
.login-field__input:focus-visible,
.login-submit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.login-field__input:focus,
.login-submit:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .login-submit {
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}