.button{appearance:none;border:var(--border-width) solid var(--color-control-border);border-radius:var(--radius-md);background-color:var(--color-control-bg);color:var(--color-text-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--control-gap);min-height:var(--control-height-md);padding-inline:var(--control-padding-x);padding-block:var(--control-padding-y-md);font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);box-shadow:var(--color-elevation-raised);transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}.button:hover:not([disabled]){background-color:var(--color-control-bg-hover);border-color:var(--color-control-border-hover);box-shadow:var(--color-elevation-raised);color:var(--color-text-primary);cursor:pointer}.button:active:not([disabled]){background-color:var(--color-control-bg-active);border-color:var(--color-control-border-active);box-shadow:var(--color-elevation-raised)}.button:focus-visible{outline:none;box-shadow:var(--color-elevation-raised),var(--focus-ring)}.button[disabled],.button[aria-disabled=true],.button--disabled{opacity:var(--opacity-disabled);cursor:not-allowed;box-shadow:none}.button[data-loading=true]{position:relative;color:transparent!important;cursor:wait}.button[data-loading=true]:after{content:"";position:absolute;inset:50% auto auto 50%;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:50%;border:calc(var(--border-width) * 2) solid var(--color-border-subtle);border-top-color:var(--color-accent);animation:spinner-rotate .8s linear infinite}.button[data-loading=true][data-spinner-slot=true]:after{display:none}.button .spinner{display:none}.button[data-loading=true][data-spinner-slot=true] .spinner{display:inline-block;position:absolute;inset:50% auto auto 50%;inline-size:1rem;block-size:1rem;margin:-.5rem 0 0 -.5rem;--spinner-size: 1rem;--spinner-stroke-width: calc(var(--border-width) * 3);--spinner-color: var(--button-spinner-color, var(--color-accent))}.button--primary{--button-spinner-color: var(--color-text-on-accent);background-color:var(--color-accent);border-color:var(--color-accent-border);color:var(--color-text-on-accent);box-shadow:var(--color-elevation-raised)}.button--primary:hover:not([disabled]){background-color:var(--color-accent-hover);border-color:var(--color-accent-border);color:var(--color-text-on-accent)}.button--primary:active:not([disabled]){background-color:var(--color-accent-active);border-color:var(--color-accent-border)}.button--subtle{background-color:var(--color-bg-surface-alt);border-color:var(--color-border-subtle);color:var(--color-text-secondary);box-shadow:none}.button--subtle:hover:not([disabled]){background-color:var(--color-bg-highlight);border-color:var(--color-border-strong);color:var(--color-text-primary)}.button--subtle:active:not([disabled]){background-color:var(--color-control-bg-active);border-color:var(--color-control-border-active)}.button--ghost{background-color:var(--color-transparent);border-color:var(--color-transparent);color:var(--color-text-secondary);box-shadow:none}.button--ghost:hover:not([disabled]){background-color:var(--color-control-bg-hover);color:var(--color-text-primary)}.button--ghost:active:not([disabled]){background-color:var(--color-control-bg-active);color:var(--color-text-primary)}.button--destructive{--button-spinner-color: var(--color-text-on-accent);background-color:var(--color-danger);border-color:var(--color-danger-strong);color:var(--color-text-on-accent);box-shadow:var(--color-elevation-overlay)}.button--destructive:hover:not([disabled]){background-color:var(--color-danger-strong)}.button--destructive:active:not([disabled]){background-color:var(--color-danger-strong);box-shadow:var(--color-elevation-raised)}.button--outline{background-color:var(--color-transparent);border-color:var(--color-border-strong);color:var(--color-text-primary);box-shadow:none}.button--outline:hover:not([disabled]){background-color:var(--color-accent);border-color:var(--color-accent-border);color:var(--color-text-on-accent)}.button--outline:active:not([disabled]){background-color:var(--color-accent-active);border-color:var(--color-accent-border);color:var(--color-text-on-accent)}.button--positive{background-color:var(--color-success);border-color:var(--color-success-strong);color:var(--color-text-on-accent)}.button--positive:hover:not([disabled]){background-color:var(--color-success-strong)}.button--positive:active:not([disabled]){background-color:var(--color-success-strong);box-shadow:var(--color-elevation-raised)}.button--icon{min-height:var(--control-height-sm);width:var(--control-height-sm);padding:0;border-radius:var(--radius-sm)}.button--small{min-height:var(--control-height-sm);padding-block:var(--control-padding-y-sm);font-size:var(--font-size-xs)}.button--large{min-height:var(--control-height-lg);padding-block:var(--control-padding-y-lg);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
