/* button */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.75em 1.5em;font-family:inherit;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:1;text-decoration:none;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.button:active{transform:translateY(1px)}.button__text{display:inline-block}.button .icon{flex-shrink:0;width:1em;height:1em}.button--icon-before .icon{order:-1}.button--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.button--primary:hover{background-color:color-mix(in srgb,var(--color-primary) 85%,black);border-color:color-mix(in srgb,var(--color-primary) 85%,black)}.button--secondary{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff}.button--secondary:hover{background-color:color-mix(in srgb,var(--color-secondary) 85%,black);border-color:color-mix(in srgb,var(--color-secondary) 85%,black)}.button--outline{background-color:transparent;border-color:currentColor;color:var(--color-text)}.button--outline:hover{background-color:var(--color-text);border-color:var(--color-text);color:var(--color-background)}.button--ghost{background-color:transparent;border-color:transparent;color:var(--color-primary)}.button--ghost:hover{background-color:var(--color-background-alt)}.button--sm{padding:.5em 1em;font-size:var(--font-size-sm)}.button--lg{padding:1em 2em;font-size:var(--font-size-lg)}