@layer components {
  .btn {
    /* Internal variables (overridable by variants) */
    --btn-bg: var(--color-canvas);
    --btn-color: var(--color-ink);
    --btn-border-color: var(--color-border-strong);

    /* Base styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space-half);

    padding-block: var(--btn-padding-block);
    padding-inline: var(--btn-padding-inline);

    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    background-color: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-radius);
    cursor: pointer;

    transition:
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      filter var(--duration-fast) var(--ease-out);

    /* Hover - subtle brightness change */
    @media (any-hover: hover) {
      &:hover {
        filter: brightness(var(--btn-hover-brightness));
      }
    }

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

    /* Disabled state */
    &:disabled,
    &[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  /* Primary variant - salmon/coral pastel */
  .btn--primary {
    --btn-bg: var(--color-primary);
    --btn-color: oklch(var(--lch-white));
    --btn-border-color: var(--color-primary);
  }

  /* Secondary variant - subtle background */
  .btn--secondary {
    --btn-bg: var(--color-canvas-alt);
    --btn-border-color: var(--color-border);
  }

  /* Ghost variant - no background */
  .btn--ghost {
    --btn-bg: transparent;
    --btn-border-color: transparent;
    --btn-color: var(--color-link);

    &:hover {
      --btn-bg: var(--color-canvas-alt);
    }
  }

  /* Link variant - looks like a link */
  .btn--link {
    --btn-bg: transparent;
    --btn-border-color: transparent;
    --btn-color: var(--color-link);

    padding-inline: var(--inline-space-half);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* Negative/danger variant */
  .btn--negative {
    --btn-bg: var(--color-negative);
    --btn-color: oklch(var(--lch-white));
    --btn-border-color: var(--color-negative);
  }

  /* Size variants */
  .btn--sm {
    font-size: var(--text-xs);
    padding-block: 0.5em;
    padding-inline: 1em;
  }

  .btn--lg {
    font-size: var(--text-base);
    padding-block: 0.75em;
    padding-inline: 2em;
  }

  /* Full width */
  .btn--block {
    inline-size: 100%;
  }

  /* Button group */
  .btn-group {
    display: inline-flex;
    gap: var(--inline-space-half);
  }
}