@layer components{.button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 2rem;border-radius:var(--radius-m);font-weight:700;text-decoration:none;transition:all .2s ease-in-out;cursor:pointer;border:none;font-family:inherit;font-size:var(--size-step-0);&.button--primary{background-color:var(--color-primary);color:#fff;&:hover{background-color:color-mix(in srgb,var(--color-primary),black 10%);transform:translateY(-1px);box-shadow:var(--shadow-md)}&:active{transform:translateY(0)}}&.button--secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);&:hover{background-color:var(--color-body-bg);border-color:var(--color-primary)}}&.button--outline{background-color:transparent;color:var(--color-primary);border:2px solid var(--color-primary);&:hover{background-color:var(--color-primary);color:#fff}}}}