@layer components {
  .btn {
    /* Component API — override via local custom properties */
    --btn-background: var(--color-ink-inverted);
    --btn-color: var(--color-ink);
    --btn-border-color: var(--color-border-emphasis);
    --btn-padding-block: 0.6em;
    --btn-padding-inline: 1.1em;
    --btn-radius: 2em;
    --btn-font-weight: var(--font-weight-semibold);
    --btn-hover-ring-size: 0.15em;
    --btn-hover-ring-color: var(--color-border-emphasis);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    background-color: var(--btn-background);
    color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--text-base);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover {
      box-shadow: 0 0 0 var(--btn-hover-ring-size) var(--btn-hover-ring-color);
    }
  }
  .btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* Primary — solid white fill + emphasis spectrum halo behind */
  .btn--primary {
    --btn-background: var(--color-accent);
    --btn-color: var(--color-ink-inverted);
    --btn-border-color: transparent;
    --btn-hover-ring-size: 0;
    position: relative;
    isolation: isolate;
    overflow: visible;
    transition:
      box-shadow var(--duration-normal) var(--ease-out),
      transform var(--duration-fast) var(--ease-out),
      filter var(--duration-fast) ease,
      background-color var(--duration-fast) ease;
  }
  .btn--primary::before {
    content: "";
    position: absolute;
    inset: var(--btn-emphasis-inset-block) var(--btn-emphasis-inset-inline);
    z-index: -1;
    border-radius: inherit;
    background-image: var(--color-emphasis-gradient);
    background-size: var(--emphasis-size);
    background-position: 0% 50%;
    filter: blur(var(--btn-emphasis-blur));
    opacity: var(--btn-emphasis-opacity);
    pointer-events: none;
    animation: emphasis-drift var(--emphasis-drift-duration) var(--ease-in-out) infinite alternate;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .btn--primary:hover {
      --btn-background: var(--color-accent-hover);
      --btn-emphasis-opacity: var(--btn-emphasis-opacity-hover);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn--primary::before {
      animation: none;
    }
  }
  /* Secondary — elevated dark surface (primary owns the white fill) */
  .btn--secondary {
    --btn-background: var(--color-canvas-elevated);
    --btn-color: var(--color-ink);
    --btn-border-color: var(--color-border-emphasis);
    --btn-hover-ring-size: 0;
    transition: box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn--secondary:hover {
      --btn-background: var(--color-border-subtle);
      --btn-border-color: var(--color-border-emphasis);
      box-shadow: var(--shadow-md);
    }
  }
  /* Ghost */
  .btn--ghost {
    --btn-background: transparent;
    --btn-border-color: transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn--ghost:hover {
      --btn-background: var(--color-canvas-alt);
    }
  }
  /* Outline */
  .btn--outline {
    --btn-background: transparent;
    --btn-border-color: var(--color-ink);
    --btn-color: var(--color-ink);
    --btn-hover-ring-size: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn--outline:hover {
      --btn-background: var(--color-ink);
      --btn-color: var(--color-ink-inverted);
    }
  }
  /* Size variants */
  .btn--sm {
    --btn-padding-block: 0.6em;
    --btn-padding-inline: 0.9em;
    font-size: var(--text-sm);
  }
  .btn--lg {
    --btn-padding-block: 0.8em;
    --btn-padding-inline: 1.4em;
    font-size: var(--text-lg);
  }
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}