@layer components {
    .button {
        --_c: var(--button-color, var(--color-primary));
        --_text: var(--button-text-color, var(--color-on-primary));
        --_radius: var(--button-radius, var(--radius-sm));
        --_size: var(--button-size, 40px);
        --_icon-size: var(--button-icon-size, 16px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        font-family: var(--font-button, var(--font-body));
        font-size: var(--_font);
        font-weight: var(--font-weight-button, 700);
        line-height: 1;
        padding: var(--button-pad-y, var(--_pad-y)) var(--button-pad-x, var(--_pad-x));
        border: none;
        border-radius: var(--_radius);
        cursor: pointer;
        text-decoration: none;
        transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed), opacity var(--transition-speed);
    }

    /* Size variants */
    .button--sm {
        --_font: var(--font-size-body-sm);
        --_pad-y: var(--spacing-xs);
        --_pad-x: var(--spacing-md);
        --_pad-x-with-icon: calc(var(--spacing-md) - 2px);
        --_icon-size: var(--button-icon-size, 14px);
        --_size: var(--button-size, 36px);
    }

    .button--md {
        --_font: var(--font-size-body);
        --_pad-y: var(--spacing-sm);
        --_pad-x: var(--spacing-md);
        --_pad-x-with-icon: calc(var(--spacing-md) - 2px);
        --_icon-size: var(--button-icon-size, 16px);
        --_size: var(--button-size, 40px);
    }

    .button--lg {
        --_font: var(--font-size-lg);
        --_pad-y: var(--spacing-md);
        --_pad-x: var(--spacing-xl);
        --_pad-x-with-icon: calc(var(--spacing-xl) - 2px);
        --_icon-size: var(--button-icon-size, 18px);
        --_size: var(--button-size, 44px);
    }

    /* Style: filled */
    .button--filled {
        background: var(--_c);
        color: var(--_text);
    }

    .button--filled:hover {
        background: var(--button-hover-bg, color-mix(in oklch, var(--_c) var(--button-hover-mix, 85%), var(--color-background)));
        color: var(--button-hover-color, var(--_text));
    }

    /* Style: outline */
    .button--outline {
        background: transparent;
        color: var(--_c);
        border: 1px solid var(--button-border-color, var(--_c));
    }

    .button--outline:hover {
        background: var(--button-hover-bg, var(--_c));
        color: var(--button-hover-color, var(--_text));
        border-color: var(--button-hover-border-color, var(--button-hover-bg, var(--_c)));
    }

    /* Style: bordered */
    .button--bordered {
        background: var(--button-bg, transparent);
        color: var(--button-color, var(--color-text));
        box-shadow: inset 0 0 0 var(--button-border-width, 1px) var(--button-border-color, var(--color-border));
        --_fr-color: var(--form-focus-ring-color, var(--color-border));
        --_fr-offset: var(--form-focus-ring-offset, 0px);
    }

    .button--bordered:hover {
        background: var(--button-hover-bg, color-mix(in oklch, var(--color-background) var(--surface-hover-mix, 93%), var(--color-text)));
    }

    /* Style: ghost */
    .button--ghost {
        background: transparent;
        color: var(--_c);
    }

    .button--ghost:hover {
        background: color-mix(in srgb, var(--_c) 10%, transparent);
    }

    /* Disabled */
    .disabled,
    [aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
        cursor: default;
    }

    /* Full width */
    .button--full {
        width: 100%;
    }

    /* Optical compensation — icon adds visual weight to that side */
    .button:has(.button__icon--before) {
        padding-inline-start: calc(var(--button-pad-x, var(--_pad-x)) - 6px);
    }

    .button:has(.button__icon--after) {
        padding-inline-end: calc(var(--button-pad-x, var(--_pad-x)) - 6px);
    }

    /* Icon only — square */
    .button--icon-only {
        padding: var(--_pad-y);
        width: var(--_size);
        height: var(--_size);
    }

    /* Icon sizing */
    .button__icon {
        display: flex;
        align-items: center;
        height: var(--_icon-size);
    }

    .button__icon svg {
        display: block;
        width: var(--_icon-size);
        height: var(--_icon-size);
    }
}