/* NEXFIT 管理者ログイン。tokens.css の変数のみを使う（外部依存なし）。 */
* { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(80rem 40rem at 50% -12rem, var(--color-accent-soft), transparent 70%),
    var(--color-paper);
  color: var(--color-ink);
  font: var(--text-base)/var(--line-body) var(--font-body);
}

.auth {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--space-md);
}

.auth-card {
  width: 100%;
  max-width: 25rem;
  padding: var(--space-2xl);
  background: var(--color-surface);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.25rem 3.5rem var(--color-shadow);
}

.auth-brand { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.auth-wordmark {
  font: 700 var(--text-xl)/1 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.auth-tagline { font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.04em; }

.auth-card h1 {
  margin: var(--space-lg) 0 var(--space-2xs);
  font: 700 var(--text-lg)/var(--line-heading) var(--font-display);
  overflow-wrap: anywhere;
}
.auth-lead { margin: 0 0 var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }

.auth-form { display: grid; gap: var(--space-lg); }
.auth-field { display: grid; gap: var(--space-2xs); min-width: 0; }
.auth-field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); }
.auth-field input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-size);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.auth-field input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 var(--rule-medium) var(--color-accent-soft);
}

.auth-error { margin: 0; min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); overflow-wrap: anywhere; }
.auth-error:not(:empty) {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-error-soft);
  border-radius: var(--radius-sm);
}

.auth-submit {
  min-height: var(--control-size-large);
  padding-inline: var(--space-lg);
  border: var(--rule-thin) solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 600 var(--text-base)/1 var(--font-body);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out);
}
.auth-submit:active { background: var(--color-accent-pressed); }
.auth-submit:disabled { opacity: .55; cursor: not-allowed; }

.auth-note {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-md);
  border-top: var(--rule-thin) solid var(--color-rule);
  font-size: var(--text-xs);
  line-height: var(--line-body);
  color: var(--color-muted);
}

:focus-visible { outline: var(--rule-medium) solid var(--color-focus); outline-offset: var(--space-3xs); }

@media (hover: hover) {
  .auth-submit:hover { background: var(--color-accent-hover); }
  .auth-field input:hover { border-color: var(--color-accent); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }