// =============================================================================
// Styles shared by LoginPage and SignupPage — both render the same card/form
// layout, so this lives in features/auth/ (the concern both pages share)
// rather than being duplicated in each page's own stylesheet. Imported by
// both LoginPage.tsx and SignupPage.tsx.
// =============================================================================

// No `@use` of the theme partial needed here: every design token below is a
// CSS custom property (--color-*, --space-*...) declared once on :root in
// styles/global.scss and available globally at runtime — not a Sass-level
// variable/mixin that would require an explicit compile-time import.

// Full-viewport centering wrapper for the auth card.
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--color-background);
}

// The form itself: a vertically-stacked card, capped width so it stays
// readable on wide screens. Raised on its own surface (rather than sitting
// directly on the page background) so it reads as one focused task.
.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  max-width: var(--max-width-form);
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  // Card title — smaller than the global page-title size (h1 defaults to
  // --font-size-2xl), since here it's heading a card, not the page.
  h1 {
    font-size: var(--font-size-lg);
    text-align: center;
    margin-bottom: var(--space-sm);
  }

  // Field labels sit directly above their input, with a little breathing
  // room from the previous field.
  label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--space-sm);
  }

  input {
    padding: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
  }

  // Submit button: full-width, visually separated from the fields above it.
  button {
    margin-top: var(--space-md);
    padding: 0.6rem;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-base);
    border: none;
    background: var(--color-primary);
    color: #fff;

    &:hover:not(:disabled) {
      background: var(--color-primary-hover);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

// Per-field validation message (client-side, from zod) — sits directly
// under its input.
.field-error {
  color: var(--color-error);
  font-size: var(--font-size-xs);
  margin: 0;
}

// Whole-form error message (from the API, e.g. wrong credentials) — sits
// above the submit button.
.form-error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

// "Already have an account? / No account yet?" link row under the form.
.auth-switch {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  text-align: center;

  a {
    color: var(--color-primary);
    font-weight: 600;
  }
}