/* Additive button-state theme surface. Existing button tokens remain supported as compatibility defaults. */
:root {
  --theme-button-font-family: var(--theme-font-family-body);
  --theme-button-font-size: var(--theme-font-size-sm);
  --theme-button-font-weight: var(--theme-font-weight-bold);
  --theme-button-letter-spacing: var(--theme-font-letter-label);
  --theme-button-line-height: 1;
  --theme-button-border-width: var(--theme-border-width);
  --theme-button-radius-sm: var(--theme-radius-sm);
  --theme-button-radius-md: var(--theme-button-radius);
  --theme-button-radius-lg: var(--theme-radius-lg);
  --theme-button-height-sm: var(--theme-control-height-sm);
  --theme-button-height-md: var(--theme-control-height-md);
  --theme-button-height-lg: var(--theme-control-height-lg);
  --theme-button-padding-inline-sm: var(--theme-space-sm);
  --theme-button-padding-inline-md: var(--theme-control-padding-inline);
  --theme-button-padding-inline-lg: var(--theme-space-lg);
  --theme-button-gap: var(--theme-control-gap);
  --theme-button-transition-duration: var(--theme-motion-duration-fast);
  --theme-button-transition-easing: var(--theme-motion-easing-standard);
  --theme-button-hover-translate-y: -1px;
  --theme-button-hover-scale: 1;
  --theme-button-active-translate-y: 0px;
  --theme-button-active-scale: .98;
  --theme-button-shadow: var(--theme-shadow-sm);
  --theme-button-shadow-hover: var(--theme-shadow-md);
  --theme-button-shadow-active: none;
  --theme-button-focus-ring-width: var(--theme-control-focus-width);
  --theme-button-focus-ring-offset: 2px;
  --theme-button-disabled-opacity: var(--theme-effect-disabled-opacity);
  --theme-button-icon-size: 1em;
  --theme-button-icon-gap: var(--theme-space-xs);
  --theme-button-primary-background: var(--theme-button-background);
  --theme-button-primary-background-hover: var(--theme-button-background-hover);
  --theme-button-primary-background-active: var(--theme-color-accent-active);
  --theme-button-primary-background-disabled: var(--theme-button-background);
  --theme-button-primary-text: var(--theme-button-text);
  --theme-button-primary-text-hover: var(--theme-button-text);
  --theme-button-primary-text-active: var(--theme-button-text);
  --theme-button-primary-text-disabled: var(--theme-button-text);
  --theme-button-primary-border: var(--theme-button-border);
  --theme-button-primary-border-hover: var(--theme-color-border-strong);
  --theme-button-primary-border-active: var(--theme-color-accent-active);
  --theme-button-primary-focus-ring: var(--theme-color-focus-ring);
  --theme-button-secondary-background: var(--theme-button-background-secondary);
  --theme-button-secondary-background-hover: var(--theme-color-surface-hover);
  --theme-button-secondary-background-active: var(--theme-color-surface-selected);
  --theme-button-secondary-background-disabled: var(--theme-button-background-secondary);
  --theme-button-secondary-text: var(--theme-button-text-secondary);
  --theme-button-secondary-text-hover: var(--theme-color-text-primary);
  --theme-button-secondary-text-active: var(--theme-color-text-primary);
  --theme-button-secondary-text-disabled: var(--theme-color-text-muted);
  --theme-button-secondary-border: var(--theme-button-border);
  --theme-button-secondary-border-hover: var(--theme-color-border-strong);
  --theme-button-secondary-border-active: var(--theme-color-accent);
  --theme-button-secondary-focus-ring: var(--theme-color-focus-ring);
  --theme-button-tertiary-background: transparent;
  --theme-button-tertiary-background-hover: var(--theme-color-surface-hover);
  --theme-button-tertiary-background-active: var(--theme-color-surface-selected);
  --theme-button-tertiary-background-disabled: transparent;
  --theme-button-tertiary-text: var(--theme-color-text-secondary);
  --theme-button-tertiary-text-hover: var(--theme-color-text-primary);
  --theme-button-tertiary-text-active: var(--theme-color-text-primary);
  --theme-button-tertiary-text-disabled: var(--theme-color-text-muted);
  --theme-button-tertiary-border: transparent;
  --theme-button-tertiary-border-hover: var(--theme-color-border);
  --theme-button-tertiary-border-active: var(--theme-color-border-strong);
  --theme-button-tertiary-focus-ring: var(--theme-color-focus-ring);
  --theme-button-destructive-background: var(--theme-button-background-danger);
  --theme-button-destructive-background-hover: var(--theme-color-error);
  --theme-button-destructive-background-active: #991b1b;
  --theme-button-destructive-background-disabled: var(--theme-button-background-danger);
  --theme-button-destructive-text: #ffffff;
  --theme-button-destructive-text-hover: #ffffff;
  --theme-button-destructive-text-active: #ffffff;
  --theme-button-destructive-text-disabled: #ffffff;
  --theme-button-destructive-border: rgba(248,113,113,.42);
  --theme-button-destructive-border-hover: var(--theme-color-error);
  --theme-button-destructive-border-active: #7f1d1d;
  --theme-button-destructive-focus-ring: #f87171;
  --theme-button-success-background: var(--theme-color-success);
  --theme-button-success-background-hover: #16a34a;
  --theme-button-success-background-active: #15803d;
  --theme-button-success-background-disabled: var(--theme-color-success);
  --theme-button-success-text: #ffffff;
  --theme-button-success-text-hover: #ffffff;
  --theme-button-success-text-active: #ffffff;
  --theme-button-success-text-disabled: #ffffff;
  --theme-button-success-border: rgba(134,239,172,.42);
  --theme-button-success-border-hover: #22c55e;
  --theme-button-success-border-active: #15803d;
  --theme-button-success-focus-ring: #4ade80;
  --theme-button-warning-background: var(--theme-color-warning);
  --theme-button-warning-background-hover: #d97706;
  --theme-button-warning-background-active: #b45309;
  --theme-button-warning-background-disabled: var(--theme-color-warning);
  --theme-button-warning-text: #09090b;
  --theme-button-warning-text-hover: #09090b;
  --theme-button-warning-text-active: #ffffff;
  --theme-button-warning-text-disabled: #09090b;
  --theme-button-warning-border: rgba(253,230,138,.54);
  --theme-button-warning-border-hover: #f59e0b;
  --theme-button-warning-border-active: #b45309;
  --theme-button-warning-focus-ring: #fbbf24;
  --theme-button-link-background: transparent;
  --theme-button-link-background-hover: var(--theme-color-accent-soft);
  --theme-button-link-background-active: var(--theme-color-surface-selected);
  --theme-button-link-background-disabled: transparent;
  --theme-button-link-text: var(--theme-color-link);
  --theme-button-link-text-hover: var(--theme-color-link-hover);
  --theme-button-link-text-active: var(--theme-color-accent-active);
  --theme-button-link-text-disabled: var(--theme-color-text-muted);
  --theme-button-link-border: transparent;
  --theme-button-link-border-hover: transparent;
  --theme-button-link-border-active: transparent;
  --theme-button-link-focus-ring: var(--theme-color-focus-ring);
}

:where(button, .button, .btn, input[type="submit"], .processor, .filter) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-button-gap);
  min-height: var(--theme-button-height-md);
  padding-inline: var(--theme-button-padding-inline-md);
  font-family: var(--theme-button-font-family);
  font-size: var(--theme-button-font-size);
  font-weight: var(--theme-button-font-weight);
  letter-spacing: var(--theme-button-letter-spacing);
  line-height: var(--theme-button-line-height);
  border-style: solid;
  border-width: var(--theme-button-border-width);
  border-radius: var(--theme-button-radius-md);
  box-shadow: var(--theme-button-shadow);
  transform: translateY(0) scale(1);
  transition: background-color var(--theme-button-transition-duration) var(--theme-button-transition-easing), color var(--theme-button-transition-duration) var(--theme-button-transition-easing), border-color var(--theme-button-transition-duration) var(--theme-button-transition-easing), box-shadow var(--theme-button-transition-duration) var(--theme-button-transition-easing), transform var(--theme-button-transition-duration) var(--theme-button-transition-easing);
}
:where(.btn.small, .button.small, button.small) { min-height: var(--theme-button-height-sm); padding-inline: var(--theme-button-padding-inline-sm); border-radius: var(--theme-button-radius-sm); }
:where(.btn.large, .button.large, button.large) { min-height: var(--theme-button-height-lg); padding-inline: var(--theme-button-padding-inline-lg); border-radius: var(--theme-button-radius-lg); }
:where(button, .button, .btn, input[type="submit"], .processor, .filter):not(:disabled):hover { transform: translateY(var(--theme-button-hover-translate-y)) scale(var(--theme-button-hover-scale)); box-shadow: var(--theme-button-shadow-hover); }
:where(button, .button, .btn, input[type="submit"], .processor, .filter):not(:disabled):active { transform: translateY(var(--theme-button-active-translate-y)) scale(var(--theme-button-active-scale)); box-shadow: var(--theme-button-shadow-active); }
:where(button, .button, .btn, input[type="submit"], .processor, .filter):disabled { opacity: var(--theme-button-disabled-opacity); cursor: not-allowed; box-shadow: none; transform: none; }
:where(button, .button, .btn, input[type="submit"], .processor, .filter) :where(svg, img) { width: var(--theme-button-icon-size); height: var(--theme-button-icon-size); }
:where(.btn.primary, .button.primary, button.primary, input[type="submit"].primary, .processor.selected, .filter.active) { background: var(--theme-button-primary-background); color: var(--theme-button-primary-text); border-color: var(--theme-button-primary-border); }
:where(.btn.primary, .button.primary, button.primary, input[type="submit"].primary, .processor.selected, .filter.active):not(:disabled):hover { background: var(--theme-button-primary-background-hover); color: var(--theme-button-primary-text-hover); border-color: var(--theme-button-primary-border-hover); }
:where(.btn.primary, .button.primary, button.primary, input[type="submit"].primary, .processor.selected, .filter.active):not(:disabled):active { background: var(--theme-button-primary-background-active); color: var(--theme-button-primary-text-active); border-color: var(--theme-button-primary-border-active); }
:where(.btn.primary, .button.primary, button.primary, input[type="submit"].primary, .processor.selected, .filter.active):focus-visible { outline: var(--theme-button-focus-ring-width) solid var(--theme-button-primary-focus-ring); outline-offset: var(--theme-button-focus-ring-offset); }
:where(.btn.primary, .button.primary, button.primary, input[type="submit"].primary, .processor.selected, .filter.active):disabled { background: var(--theme-button-primary-background-disabled); color: var(--theme-button-primary-text-disabled); }
:where(.btn.secondary, .button.secondary, button.secondary, input[type="submit"].secondary, .processor) { background: var(--theme-button-secondary-background); color: var(--theme-button-secondary-text); border-color: var(--theme-button-secondary-border); }
:where(.btn.secondary, .button.secondary, button.secondary, input[type="submit"].secondary, .processor):not(:disabled):hover { background: var(--theme-button-secondary-background-hover); color: var(--theme-button-secondary-text-hover); border-color: var(--theme-button-secondary-border-hover); }
:where(.btn.secondary, .button.secondary, button.secondary, input[type="submit"].secondary, .processor):not(:disabled):active { background: var(--theme-button-secondary-background-active); color: var(--theme-button-secondary-text-active); border-color: var(--theme-button-secondary-border-active); }
:where(.btn.secondary, .button.secondary, button.secondary, input[type="submit"].secondary, .processor):focus-visible { outline: var(--theme-button-focus-ring-width) solid var(--theme-button-secondary-focus-ring); outline-offset: var(--theme-button-focus-ring-offset); }
:where(.btn.secondary, .button.secondary, button.secondary, input[type="submit"].secondary, .processor):disabled { background: var(--theme-button-secondary-background-disabled); color: var(--theme-button-secondary-text-disabled); }
:where(.btn.tertiary, .button.tertiary, button.tertiary, .filter) { background: var(--theme-button-tertiary-background); color: var(--theme-button-tertiary-text); border-color: var(--theme-button-tertiary-border); }
:where(.btn.tertiary, .button.tertiary, button.tertiary, .filter):not(:disabled):hover { background: var(--theme-button-tertiary-background-hover); color: var(--theme-button-tertiary-text-hover); border-color: var(--theme-button-tertiary-border-hover); }
:where(.btn.tertiary, .button.tertiary, button.tertiary, .filter):not(:disabled):active { background: var(--theme-button-tertiary-background-active); color: var(--theme-button-tertiary-text-active); border-color: var(--theme-button-tertiary-border-active); }
:where(.btn.tertiary, .button.tertiary, button.tertiary, .filter):focus-visible { outline: var(--theme-button-focus-ring-width) solid var(--theme-button-tertiary-focus-ring); outline-offset: var(--theme-button-focus-ring-offset); }
:where(.btn.tertiary, .button.tertiary, button.tertiary, .filter):disabled { background: var(--theme-button-tertiary-background-disabled); color: var(--theme-button-tertiary-text-disabled); }
:where(.btn.destructive, .button.destructive, button.destructive, .btn.danger, .button.danger, button.danger) { background: var(--theme-button-destructive-background); color: var(--theme-button-destructive-text); border-color: var(--theme-button-destructive-border); }
:where(.btn.destructive, .button.destructive, button.destructive, .btn.danger, .button.danger, button.danger):not(:disabled):hover { background: var(--theme-button-destructive-background-hover); color: var(--theme-button-destructive-text-hover); border-color: var(--theme-button-destructive-border-hover); }
:where(.btn.destructive, .button.destructive, button.destructive, .btn.danger, .button.danger, button.danger):not(:disabled):active { background: var(--theme-button-destructive-background-active); color: var(--theme-button-destructive-text-active); border-color: var(--theme-button-destructive-border-active); }
:where(.btn.destructive, .button.destructive, button.destructive, .btn.danger, .button.danger, button.danger):focus-visible { outline: var(--theme-button-focus-ring-width) solid var(--theme-button-destructive-focus-ring); outline-offset: var(--theme-button-focus-ring-offset); }
:where(.btn.destructive, .button.destructive, button.destructive, .btn.danger, .button.danger, button.danger):disabled { background: var(--theme-button-destructive-background-disabled); color: var(--theme-button-destructive-text-disabled); }
:where(.btn.success, .button.success, button.success) { background: var(--theme-button-success-background); color: var(--theme-button-success-text); border-color: var(--theme-button-success-border); }
:where(.btn.success, .button.success, button.success):not(:disabled):hover { background: var(--theme-button-success-background-hover); color: var(--theme-button-success-text-hover); border-color: var(--theme-button-success-border-hover); }
:where(.btn.success, .button.success, button.success):not(:disabled):active { background: var(--theme-button-success-background-active); color: var(--theme-button-success-text-active); border-color: var(--theme-button-success-border-active); }
:where(.btn.success, .button.success, button.success):focus-visible { outline: var(--theme-button-focus-ring-width) solid var(--theme-button-success-focus-ring); outline-offset: var(--theme-button-focus-ring-offset); }
:where(.btn.success, .button.success, button.success):disabled { background: var(--theme-button-success-background-disabled); color: var(--theme-button-success-text-disabled); }
:where(.btn.warning, .button.warning, button.warning) { background: var(--theme-button-warning-background); color: var(--theme-button-warning-text); border-color: var(--theme-button-warning-border); }
:where(.btn.warning, .button.warning, button.warning):not(:disabled):hover { background: var(--theme-button-warning-background-hover); color: var(--theme-button-warning-text-hover); border-color: var(--theme-button-warning-border-hover); }
:where(.btn.warning, .button.warning, button.warning):not(:disabled):active { background: var(--theme-button-warning-background-active); color: var(--theme-button-warning-text-active); border-color: var(--theme-button-warning-border-active); }
:where(.btn.warning, .button.warning, button.warning):focus-visible { outline: var(--theme-button-focus-ring-width) solid var(--theme-button-warning-focus-ring); outline-offset: var(--theme-button-focus-ring-offset); }
:where(.btn.warning, .button.warning, button.warning):disabled { background: var(--theme-button-warning-background-disabled); color: var(--theme-button-warning-text-disabled); }
:where(.btn.link, .button.link, button.link, .text-link) { background: var(--theme-button-link-background); color: var(--theme-button-link-text); border-color: var(--theme-button-link-border); }
:where(.btn.link, .button.link, button.link, .text-link):not(:disabled):hover { background: var(--theme-button-link-background-hover); color: var(--theme-button-link-text-hover); border-color: var(--theme-button-link-border-hover); }
:where(.btn.link, .button.link, button.link, .text-link):not(:disabled):active { background: var(--theme-button-link-background-active); color: var(--theme-button-link-text-active); border-color: var(--theme-button-link-border-active); }
:where(.btn.link, .button.link, button.link, .text-link):focus-visible { outline: var(--theme-button-focus-ring-width) solid var(--theme-button-link-focus-ring); outline-offset: var(--theme-button-focus-ring-offset); }
:where(.btn.link, .button.link, button.link, .text-link):disabled { background: var(--theme-button-link-background-disabled); color: var(--theme-button-link-text-disabled); }
.btn.link, .button.link, button.link, .text-link { min-height: auto; padding-inline: 0; box-shadow: none; text-decoration: underline; text-underline-offset: .18em; }
.btn.link:hover, .button.link:hover, button.link:hover, .text-link:hover { box-shadow: none; }