/* First screen for a person with no chats. Ink text on brand cyan in both themes:
   white on cyan fails contrast, so the action button is ink with paper text. */
.welcome-box {
  background: var(--color-brand);
  border-radius: 1rem;
  color: var(--color-brand-text);
  margin-inline: auto;
  max-inline-size: 36rem;
  padding: 1.5rem 2rem;
  text-align: center;

  .welcome-box__title {
    color: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    margin-block: 0 0.5rem;
  }

  p {
    margin-block: 0.5rem;
  }

  .welcome-box__action {
    --btn-background: var(--color-brand-text);
    --btn-border-color: transparent;
    --btn-color: oklch(var(--fu-paper));
  }

  .welcome-box__secondary {
    --btn-background: transparent;
    --btn-border-color: var(--color-brand-text);
    --btn-color: var(--color-brand-text);
  }

  .welcome-box__note {
    font-size: 0.875rem;
  }
}