@layer components {
  /*
   * Buttons. Variants only set the custom properties; hover and pressed shades
   * are derived with color-mix() so they work in light and dark mode.
   */
  .btn {
    --btn-bg: var(--color-surface);
    --btn-fg: var(--color-text);
    --btn-border: var(--color-border-strong);
    --btn-hover-mix: 6%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-block-size: 2.75rem; /* 44px touch target */
    padding: 0.6em 1.15em;
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-m);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--step-0);
    font-weight: 560;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out),
      scale var(--duration-fast) var(--ease-out);

    &:hover {
      background-color: color-mix(in oklab, var(--btn-bg), var(--color-text) var(--btn-hover-mix));
    }

    &:active {
      scale: 0.98;
    }

    &:focus-visible {
      box-shadow: var(--focus-ring);
    }

    &:disabled, &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    & svg {
      inline-size: 1.15em;
      block-size: 1.15em;
      flex-shrink: 0;
    }
  }

  .btn--primary {
    --btn-bg: var(--color-accent);
    --btn-fg: var(--color-on-accent);
    --btn-border: transparent;
    --btn-hover-mix: 14%;
    box-shadow: var(--shadow-s);
  }

  .btn--secondary {
    --btn-bg: var(--color-surface);
    box-shadow: var(--shadow-s);
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;

    &:hover {
      background-color: color-mix(in oklab, var(--color-text) 6%, transparent);
    }
  }

  .btn--danger {
    --btn-bg: var(--color-danger);
    --btn-fg: oklch(99% 0 0);
    --btn-border: transparent;
    --btn-hover-mix: 14%;
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn--small {
    min-block-size: 2.25rem;
    padding: 0.4em 0.85em;
    font-size: var(--step--1);
  }

  .btn--large {
    min-block-size: 3.25rem;
    padding: 0.75em 1.5em;
    font-size: var(--step-1);
  }

  /* button_to wraps the button in a form; keep it inline. */
  form.button_to {
    display: contents;
  }
}