/* Default Button Variant */
.btn-default {
    background-color: var(--sys-color-neutral-default);
    color: var(--sys-color-neutral-text);
    border-color: var(--sys-color-neutral-default);
}

.btn-default:hover {
    background-color: var(--sys-color-neutral-hover);
    border-color: var(--sys-color-neutral-hover);
    color: var(--sys-color-neutral-text);
}

.btn-default:active {
    background-color: var(--sys-color-neutral-active);
    border-color: var(--sys-color-neutral-active);
    color: var(--sys-color-neutral-text);
}

.btn-default:focus-visible {
    outline-color: var(--sys-color-neutral-default);
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

.btn-default:disabled {
    background-color: var(--sys-color-interactive-disabled);
    border-color: var(--sys-color-interactive-disabled);
    color: var(--sys-color-text-subtle);
}

/* Default outline variant */
.btn-default-outline {
    background-color: transparent;
    color: var(--sys-color-neutral-default);
    border-color: var(--sys-color-neutral-default);
}

.btn-default-outline:hover {
    background-color: var(--sys-color-neutral-default);
    color: var(--sys-color-neutral-text);
    border-color: var(--sys-color-neutral-default);
}

.btn-default-outline:active {
    background-color: var(--sys-color-neutral-active);
    color: var(--sys-color-neutral-text);
    border-color: var(--sys-color-neutral-active);
}

/* Default ghost variant */
.btn-default-ghost {
    background-color: transparent;
    color: var(--sys-color-neutral-default);
    border-color: transparent;
}

.btn-default-ghost:hover {
    background-color: rgba(107, 114, 128, 0.1);
    color: var(--sys-color-neutral-hover);
}

.btn-default-ghost:active {
    background-color: rgba(107, 114, 128, 0.2);
    color: var(--sys-color-neutral-active);
}

/* Secondary variant (alias for neutral with different styling) */
.btn-secondary {
    background-color: var(--sys-color-secondary-default);
    color: var(--sys-color-secondary-text);
    border-color: var(--sys-color-secondary-default);
}

.btn-secondary:hover {
    background-color: var(--sys-color-secondary-hover);
    border-color: var(--sys-color-secondary-hover);
    color: var(--sys-color-secondary-text);
}

.btn-secondary:active {
    background-color: var(--sys-color-secondary-active);
    border-color: var(--sys-color-secondary-active);
    color: var(--sys-color-secondary-text);
}