@layer components {
  .btn {
    --btn-background: var(--color-canvas-raised);
    --btn-border-color: oklch(var(--lch-ink-2));
    --btn-color: var(--color-ink);
    --btn-padding: 0.55em 1.4em;
    --btn-font-weight: 600;
    --btn-border-radius: 0;

    appearance: none;
    background-color: var(--btn-background);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5ch;
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--btn-font-weight);
    letter-spacing: -0.01em;
    line-height: 1.375;
    padding: var(--btn-padding);
    text-decoration: none;
    white-space: nowrap;
    transition: 150ms ease;
    transition-property: background-color, border-color, box-shadow, color, transform;

    &:hover {
      --btn-border-color: oklch(var(--lch-ink-3));
      box-shadow: none;
      text-decoration: none;
      transform: none;
    }

    &:active {
      transform: translateY(0);
      box-shadow: none;
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    &:disabled,
    &[disabled] {
      opacity: 0.35;
      pointer-events: none;
    }
  }

  /* Primary — brand turquoise */
  .btn--primary {
    --btn-background: var(--color-primary);
    --btn-border-color: var(--color-primary);
    --btn-color: var(--color-ink-inverted);

    &:hover {
      --btn-background: oklch(var(--lch-teal-5));
      --btn-border-color: oklch(var(--lch-teal-5));
      box-shadow: none;
    }
  }

  /* Positive — green */
  .btn--positive {
    --btn-background: var(--color-primary);
    --btn-border-color: var(--color-primary);
    --btn-color: var(--color-ink-inverted);

    &:hover {
      --btn-background: oklch(var(--lch-teal-5));
      --btn-border-color: oklch(var(--lch-teal-5));
      box-shadow: none;
    }
  }

  /* Negative — red destructive */
  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-border-color: var(--color-negative);
    --btn-color: var(--color-ink-inverted);

    &:hover {
      --btn-background: oklch(50% 0.2 25);
      --btn-border-color: oklch(50% 0.2 25);
      box-shadow: none;
    }
  }

  /* Link — text only */
  .btn--link {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --btn-color: var(--color-link);
    --btn-padding: 0;
    --btn-font-weight: 500;

    &:hover {
      --btn-color: var(--color-primary-dark);
      box-shadow: none;
      transform: none;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
  }
}