/* ==========================================================================
   Orcheum · Authentication Card
   Source of truth: Figma node 404:4931 (Sign up card body).
   Reusable — namespaced under .oc-auth-card.
   ========================================================================== */

.oc-auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);            /* 24px — Figma 538:2450 */
  align-items: stretch;
  width: 100%;
  max-width: 390px;               /* Figma 538:2450 column width */
  padding: 0;
}

/* Title — Figma 404:4933 · Playfair 36px */
.oc-auth-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-4xl);     /* 36px */
  line-height: 1.5;
  letter-spacing: -0.72px;
  text-align: center;
  color: var(--color-foreground);
}

/* Form — Figma 538:2450 · fields group → checkbox → primary button, 24px apart */
.oc-auth-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);            /* 24px */
  width: 100%;
}

/* Field group — Figma 538:2453 · the three inputs, 12px apart */
.oc-auth-card__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);            /* 12px */
  width: 100%;
}

/* Social buttons — Figma 538:2465 · stacked full-width, 16px apart */
.oc-auth-card__social {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Footer — Figma 404:4948 "Already have an account? Log in" */
.oc-auth-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);            /* 12px */
  width: 100%;
  height: 20px;
  margin: 0;
}

.oc-auth-card__footer-text {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  letter-spacing: -0.21px;
  color: var(--color-text-secondary);
}

@media (max-width: 560px) {
  .oc-auth-card {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }
  .oc-auth-card__title {
    font-size: 30px;
  }
}