/* Shared UI primitives. Only what an actual page uses — a component with no
   caller is a component nobody has designed yet (§51.27). */

@layer components {

  .card {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
  }

  .button {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--surface);
    text-decoration: none;
    cursor: pointer;

    &:disabled {
      opacity: .55;
      cursor: not-allowed;
    }

    &.button--quiet {
      background: transparent;
      border-color: var(--border);
      color: var(--text);
    }
  }
}