@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.4em 0.9em;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
  }

  .btn:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }

  /* Primary - solid blue, darker on hover */
  .btn--primary {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: white;
  }

  .btn--primary:hover:not(:disabled) {
    background-color: oklch(from var(--color-blue) calc(l - 0.08) c h);
  }

  /* Secondary/Outline - transparent with border, grey fill on hover */
  .btn--secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-ink);
  }

  .btn--secondary:hover:not(:disabled) {
    background-color: var(--color-canvas-alt);
  }

  /* Edit - solid orange with dark text */
  .btn--edit {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    color: white;
  }

  .btn--edit:hover:not(:disabled) {
    background-color: oklch(from var(--color-orange) calc(l - 0.08) c h);
  }

  /* Danger - for destructive actions */
  .btn--danger {
    background-color: var(--color-red);
    border-color: var(--color-red);
    color: white;
  }

  .btn--danger:hover:not(:disabled) {
    background-color: oklch(from var(--color-red) calc(l - 0.08) c h);
  }

  /* Primary outline - transparent with blue border, used for active filter state */
  .btn--primary-outline {
    background-color: transparent;
    border-color: var(--color-blue);
    color: var(--color-blue);
  }

  .btn--primary-outline:hover:not(:disabled) {
    background-color: oklch(from var(--color-blue) l c h / 0.1);
  }

  /* Danger outline - for destructive actions that need less emphasis */
  .btn--danger-outline {
    background-color: transparent;
    border-color: var(--color-red);
    color: var(--color-red);
  }

  .btn--danger-outline:hover:not(:disabled) {
    background-color: var(--color-red);
    color: white;
  }

  /* Disabled state */
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Ghost - minimal, just text */
  .btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-ink-muted);
  }

  .btn--ghost:hover:not(:disabled) {
    background-color: var(--color-canvas-alt);
    color: var(--color-ink);
  }

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

  .btn--sm {
    padding: 0.3em 0.7em;
    font-size: var(--text-xs);
  }

  .btn--lg {
    padding: 0.5em 1.2em;
    font-size: var(--text-base);
  }

  /* Link style - text that looks like a link but is a button */
  .btn--link {
    background-color: var(--color-blue);
    border-color: var(--color-canvas);
    color: white;
  }

  .btn--link:hover:not(:disabled) {
    background-color: oklch(from var(--color-blue) calc(l - 0.08) c h);
  }

  /* Circle on mobile - collapses to icon-only circle */
  @media (max-width: 639px) {
    .btn--circle-mobile {
      --btn-size: 3em;
      padding: 0;
      aspect-ratio: 1;
      inline-size: var(--btn-size);

      kbd,
      span:last-of-type {
        display: none;
      }
    }
  }

  /* Hotkey badge inside button */
  .btn__hotkey {
    font-family: var(--font-family);
    font-size: 0.75em;
    font-weight: 600;
    padding: 0.1em 0.4em;
    background-color: oklch(100% 0 0 / 0.2);
    border-radius: var(--radius-sm);
    margin-inline-start: 0.25em;
  }

  .btn--secondary .btn__hotkey {
    background-color: var(--color-grey-200);
  }
}