.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-inline-size: var(--control-min-size);
    min-block-size: var(--control-min-size);
    max-inline-size: 100%;
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: inherit;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.button--primary { background: var(--color-accent); color: var(--color-on-accent); }
.button--outline { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.button--primary:hover, .button--outline:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.button--icon {
    inline-size: var(--control-min-size);
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    line-height: var(--line-height-control);
}
.button--icon:hover, .button--icon[aria-expanded="true"] { background: var(--color-interaction); }
.button--secondary {
    min-block-size: 2.875rem;
    gap: 0.625rem;
    padding: 0.625rem var(--space-8);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--button-background, var(--color-secondary));
    color: var(--color-on-accent);
    font-size: var(--fs-body-large);
    line-height: var(--line-height-control);
}
.button--secondary:hover { background: var(--button-background-hover, var(--color-secondary-hover)); }
.button--block { inline-size: 100%; }
.button[hidden] { display: none; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.button--inactive:disabled { opacity: 1; cursor: default; }
.button--inactive:disabled:hover { background: var(--button-background, var(--color-secondary)); }

.button--brand { --button-background: var(--color-brand-action); --button-background-hover: var(--color-brand-action-hover); min-block-size: 3rem; inline-size: min(100%, 18rem); }

.button--light { --button-background: var(--color-background); --button-background-hover: var(--color-interaction); color: var(--color-text); min-block-size: 3rem; font-size: clamp(var(--fs-small), 1.25vw, var(--fs-body-large)); padding-inline: clamp(var(--space-2), 1.666667vw, var(--space-6)); }
.button--icon-light { inline-size: 3rem; block-size: 3rem; flex-shrink: 0; border: 0; border-radius: var(--radius-round); padding: var(--space-2); color: var(--color-text); background: var(--color-background); }
.button--icon-light:hover { background: var(--color-interaction); }
.button--icon-light:disabled { opacity: 1; cursor: default; }

.button--wheel { border: 0; padding: 0; background: transparent; color: var(--color-brand-action); font-family: var(--font-heading); font-size: var(--fs-secondary-max); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: -0.02em; }
.button--wheel:hover { color: var(--color-services-background); }
.button--tab { border: 0; padding: var(--space-3) 0; background: transparent; color: var(--color-case-description); font-size: var(--fs-small); line-height: var(--line-height-control); text-align: start; }
.button--tab:hover, .button--tab[aria-selected="true"] { color: var(--color-brand-action); }
.button--icon-outline { inline-size: 3rem; block-size: 3rem; padding: var(--space-2); border-color: var(--color-brand-action); border-radius: var(--radius-round); color: var(--color-brand-action); background: transparent; }
.button--icon-outline:hover { background: var(--color-interaction); }
.button--fit { inline-size: auto; }

.button--wide { inline-size: min(100%, 18rem); font-size: var(--fs-body-large); }
@media (width < 48rem) { .button--compact { padding-inline: var(--space-4); } }

.button--media-preview { inline-size: 100%; block-size: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; color: var(--color-on-accent); cursor: pointer; }