/* ── AUTH PAGES (login, register, subscribe) ── */
@layer components {
  .auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--space-4);
    background:
      radial-gradient(ellipse 60% 50% at 50% -10%, var(--gold-glow) 0%, transparent 70%),
      var(--surface-page);
  }

  .auth-card {
    width: 100%;
    max-width: 28rem;
    background: var(--surface-card);
    border: 1px solid var(--surface-card-border);
    border-top: 2px solid var(--gold-mid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8);
  }

  .auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
  }

  .auth-logo img {
    height: 36px;
    width: auto;
  }

  .auth-logo-light { display: block; }
  .auth-logo-dark { display: none; }
  .dark .auth-logo-light { display: none; }
  .dark .auth-logo-dark { display: block; }

  .auth-logo--tall img {
    height: 72px;
  }

  .auth-tagline {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
  }

  .auth-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-6);
  }

  .auth-footer {
    margin-top: var(--space-4);
    text-align: center;
  }

  .auth-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-4);
  }
}