.peppe-button{justify-content:center;align-items:center;gap:var(--space-8);padding:0 var(--space-24);height:var(--touch-target-md);border-radius:var(--radius-button-md);font-family:var(--type-family-sans);font-size:var(--type-size-md);font-weight:var(--type-weight-medium);letter-spacing:var(--type-tracking-normal);cursor:pointer;white-space:nowrap;transition:background var(--duration-micro) ease, box-shadow var(--duration-micro) ease, color var(--duration-micro) ease;border:none;line-height:1;text-decoration:none;display:inline-flex}.peppe-button:focus-visible{outline:var(--focus-ring-width) solid var(--color-functional-info);outline-offset:var(--focus-ring-offset)}.peppe-button--lg{height:64px;padding:0 var(--space-32);font-size:var(--type-size-md);border-radius:var(--radius-button-lg)}.peppe-button--secondary{background:var(--color-ink-primary);color:var(--color-ink-inverse)}.peppe-button--secondary:hover{background:var(--color-ink-primary-hover)}.peppe-button--secondary:active{background:var(--color-ink-primary-active)}.peppe-button--secondary[data-state=disabled],.peppe-button--secondary:disabled{background:var(--color-surface-divider);color:var(--color-ink-tertiary);cursor:not-allowed}.peppe-button--tertiary{color:var(--color-ink-primary);padding:0 var(--space-24);background:0 0}.peppe-button--tertiary:hover{background:var(--color-nav-hover);color:var(--color-ink-primary)}.peppe-button--tertiary:active{background:var(--color-nav-active);color:var(--color-ink-primary)}.peppe-button--tertiary[data-state=disabled],.peppe-button--tertiary:disabled{color:var(--color-ink-tertiary);cursor:not-allowed}.peppe-button__spinner{width:var(--icon-size-md);height:var(--icon-size-md);flex-shrink:0;display:none}.peppe-button[data-state=loading] .peppe-button__label{display:none}.peppe-button[data-state=loading] .peppe-button__spinner{animation:.8s linear infinite peppe-spin;display:block}@keyframes peppe-spin{to{transform:rotate(360deg)}}.peppe-button--secondary[data-state=loading] .peppe-button__spinner,.peppe-button--tertiary[data-state=loading] .peppe-button__spinner{color:var(--color-ink-secondary)}.peppe-button__variants-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(3,1fr);display:grid}.peppe-button__variants-grid .peppe-component__sample-wrap{min-height:120px}.peppe-button__sizes-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:1fr 1fr;display:grid}.peppe-button__sizes-grid .peppe-component__sample-wrap{min-height:120px}.peppe-button__states-grid{gap:var(--space-24);margin-top:var(--space-32);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.peppe-button__states-grid .peppe-component__sample-wrap{min-height:96px}.peppe-button--secondary.peppe-button--hover-demo{background:var(--color-ink-primary-hover)}.peppe-button--secondary.peppe-button--active-demo{background:var(--color-ink-primary-active)}.peppe-button--tertiary.peppe-button--hover-demo{background:var(--color-nav-hover)}.peppe-button--tertiary.peppe-button--active-demo{background:var(--color-nav-active)}@media (max-width:768px){.peppe-button__variants-grid,.peppe-button__sizes-grid{gap:var(--space-16);grid-template-columns:1fr}.peppe-button__states-grid{gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}