/* sako-internal — shared form + auth-page styles */

@layer components {
  /* ─── Auth page centering ─────────────────────────────────── */

  .auth-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--page-px);
    background: var(--bg);
  }

  .auth-card {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow);
  }

  .auth-card__header {
    text-align: center;
  }

  .auth-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .auth-card__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--ink-2);
  }

  .auth-card__footer {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--ink-2);
    margin: 0;
  }

  /* ─── Form layouts ────────────────────────────────────────── */

  .auth-form,
  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* ─── Flash messages ──────────────────────────────────────── */

  .flash {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    margin: 0;
  }

  .flash--alert {
    background: var(--red-bg);
    color: var(--red);
    border: 1px solid var(--red);
  }

  .flash--notice {
    background: var(--green-bg);
    color: var(--green);
    border: 1px solid var(--green);
  }
}