/* OAuth Buttons
 * Styled provider buttons for Google and Apple sign-in.
 * Full-width outline style matching brand.
 */

@layer components {
  .oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
  }

  .oauth-btn {
    width: 100%;
    justify-content: center;
    min-height: var(--touch-min);
    font-weight: 500;
    border-color: var(--color-border);
    color: var(--color-ink);

    &:hover {
      border-color: var(--color-ink-muted);
      background: color-mix(in oklch, var(--color-ink) 5%, transparent);
    }
  }
}