/* login.css — auth page scaffolding. Uses the same tokens + components
   as the main UI, adds a centered single-column form layout. */
@layer components {
  .auth-body {
    display: grid;
    place-items: center;
    min-block-size: 100dvh;
    padding: var(--space-l);
  }

  .auth-main {
    display: grid;
    gap: var(--space-l);
    inline-size: min(26rem, 100%);
  }

  .auth-head {
    text-align: center;

    & h1 {
      font-size: var(--type-h1);
      margin-block-end: var(--space-xs);
    }

    & .tagline {
      color: var(--muted);
      font-size: var(--type-small);
      margin-inline: auto;
    }
  }

  .auth-form {
    display: grid;
    gap: var(--space-m);
    padding: var(--space-l);
    background: var(--card-bg);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);

    & h2 {
      font-size: var(--type-h2);
      margin-block-end: var(--space-xs);
    }
  }

  .auth-field {
    display: grid;
    gap: var(--space-xs);

    & span {
      color: var(--muted);
      font-size: var(--type-small);
    }

    & input {
      padding-inline: var(--space-m);
      padding-block: var(--space-s);
      background: transparent;
      border: var(--hairline) solid var(--border);
      border-radius: var(--radius-s);
      color: var(--fg);
      font: inherit;

      &:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-color: var(--accent);
      }
    }
  }

  .auth-toggle {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    color: var(--muted);
    font-size: var(--type-small);

    & .link-btn {
      padding: 0;
    }
  }

  .auth-error {
    padding: var(--space-s);
    background: color-mix(in oklab, var(--danger) 10%, var(--card-bg));
    border: var(--hairline) solid var(--danger);
    border-radius: var(--radius-s);
    color: var(--danger);
    font-size: var(--type-small);
    text-align: center;
  }
}