button {
  // Size tokens - renamed for clarity
  --btn-size-xs: 0.6875rem;
  --btn-size-sm: 0.8125rem;
  --btn-size-md: 0.9375rem;
  --btn-size-lg: 1.125rem;
  --btn-size-xl: 1.375rem;
  --btn-size-2xl: 1.75rem;
  --btn-pill: 100vw;
  --btn-fs: var(--btn-size-md);

  --btn-height: calc(var(--btn-fs) * 2.75);
  --btn-bg: var(--color-primary);
  --btn-color: var(--color-text-inverse);
  --btn-width: max-content;

  font-size: var(--btn-fs);
  font-weight: var(--btn-fw, 500);
  height: var(--btn-height);
  place-items: var(--btn-place, center);
  padding-inline: var(--btn-padding-inline, calc(var(--btn-fs) * 1.5));
  padding-block: var(--btn-padding-block, calc(var(--btn-fs) * 0.5));
  border: var(--btn-border, none);
  border-radius: var(--btn-radius, calc(6rem / 16));
  text-decoration: var(--btn-deco, none);
  color: var(--btn-color, currentColor);
  display: var(--btn-display, inline-flex);
  gap: var(--btn-gap, 0.2rem);
  white-space: var(--btn-whitespace, inherit);
  margin: var(--btn-spacing, 0);
  transition: var(
    --btn-transition,
    var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1))
  );
  background-color: var(--btn-bg, var(--btn));
  outline: none;
  width: var(--btn-width);
  display: inline-flex;
  align-items: center;
  line-height: 0cap;

  &[type] {
    background-color: var(--btn-bg, var(--color-primary));
    --btn-border: solid var(--btn-sg);
  }

  &[type="submit"],
  &[style*="submit"] {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-text-inverse);
  }

  &[disabled],
  &[aria-disabled="true"] {
    cursor: var(--btn-cursor, not-allowed);
    // opacity: var(--btn-opacity, 0.5);

    &:is(:hover, :focus) {
      transform: none;
      // background-color: var(--btn-bg, lightgray);
      // opacity: var(--btn-opacity, 0.5);
    }
  }

  // TODO: add hover/focus with :if()
  &:is(:hover, :focus) {
    // Darken the background on hover by reducing brightness
    filter: var(--btn-hover-filter, brightness(0.85));
    transform: var(--btn-hover-transform, scale(1.03));
    outline: var(--btn-hover-outline, thin);
    outline-offset: var(--line-offset, 1px);
    // outline-style: var(--line-style, solid);

    &[aria-disabled="true"] {
      transform: none;
      opacity: var(--btn-opacity, 0.5);
      filter: none;
    }
  }

  &:focus-visible {
    outline: var(--btn-focus-outline, 2px solid currentColor);
    outline-offset: var(--btn-focus-outline-offset, 1px);
  }

  &[type="reset"] {
    --btn-bg: transparent;
    --btn-color: var(--color-text-secondary);
    --btn-border: var(--color-border) thin solid;
  }

  &[type="submit"] {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-text-inverse);
    --btn-border: none;
  }

  &[data-fp-btn~="pill"],
  &[data-btn~="pill"],
  &[data-style~="pill"],
  &.btn-pill {
    border-radius: var(--btn-pill, 100vw);
  }

  // Color variants — map to semantic tokens from index.css
  &[data-color="primary"] {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-text-inverse);
  }

  &[data-color="secondary"] {
    --btn-bg: var(--color-secondary);
    --btn-color: var(--color-text-inverse);
  }

  &[data-color="danger"] {
    --btn-bg: var(--color-error);
    --btn-color: var(--color-text-inverse);
  }

  &[data-color="success"] {
    --btn-bg: var(--color-success);
    --btn-color: var(--color-text-inverse);
  }

  &[data-color="warning"] {
    --btn-bg: var(--color-warning);
    --btn-color: var(--color-text-inverse);
  }

  &[data-color="info"] {
    --btn-bg: var(--color-info);
    --btn-color: var(--color-text-inverse);
  }

  // Style variants via data-style (variant prop) — mirrors link button patterns
  &[data-style~="outline"] {
    --btn-bg: transparent;
    --btn-color: currentColor;
    --btn-border: 0.125rem solid currentColor;

    &:is(:hover, :focus) {
      background-color: color-mix(in srgb, currentColor 10%, transparent);
      filter: none;
      outline: 0.025rem solid currentColor;
      outline-offset: 0;
    }
  }

  &[data-style~="text"] {
    --btn-bg: transparent;
    --btn-color: currentColor;
    --btn-border: none;
    --btn-height: unset;
    --btn-width: unset;
    --btn-padding-block: 0.75rem;
    --btn-padding-inline: 0.75rem;
    &:is(:hover, :focus) {
      background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
      outline: 0.025rem solid var(--btn-color);
      outline-offset: 0;
      filter: none;
    }
  }

  &[data-style~="icon"] {
    padding: unset;
    height: unset;
    --btn-bg: transparent;
    min-width: 1.5rem;
    min-height: 1.5rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &[data-btn~="xs"],
  .btn-xs {
    --btn-fs: var(--btn-size-xs);
    text-transform: uppercase;
  }

  &[data-btn~="sm"],
  .btn-sm {
    --btn-fs: var(--btn-size-sm);
  }

  &[data-btn~="md"],
  .btn-md {
    --btn-fs: var(--btn-size-md);
  }

  &[data-btn~="lg"],
  .btn-lg {
    --btn-fs: var(--btn-size-lg);
  }

  &[data-btn~="xl"],
  .btn-xl {
    --btn-fs: var(--btn-size-xl);
  }

  &[data-btn~="2xl"],
  .btn-2xl {
    --btn-fs: var(--btn-size-2xl);
  }

  &[data-btn~="block"],
  .btn-block {
    --btn-width: 100%;
    display: flex;
    justify-content: center;
  }

  &[data-btn~="text"],
  .btn-text {
    --btn-bg: transparent;
    --btn-color: currentColor;
    --btn-border: none;
    --btn-height: unset;
    --btn-width: unset;
    --btn-padding-block: 0.75rem;
    --btn-padding-inline: 0.75rem;
    &:is(:hover, :focus) {
      background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
      outline: 0.025rem solid var(--btn-color);
      outline-offset: 0;
      filter: none; // Override parent filter
    }
  }
}