/* Pagina di login — ispirata al pattern "Simple card" di Tailwind Plus
   (tailwindcss.com/plus/ui-blocks/application-ui/forms/sign-in-forms),
   riprodotta a mano sul design system del progetto: niente Tailwind
   importato, vedi memoria "frontend-style-philosophy". */

@layer components {
  .login-page {
    min-block-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
  }

  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }

  .login-brand {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
  }

  .login-heading {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
  }

  .login-card {
    inline-size: 100%;
    max-inline-size: 24rem;
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .login-card .form {
    gap: var(--space-6);
  }

  .field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .field__label-action {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-link);

    &:hover {
      color: var(--color-link-hover);
    }
  }
}