/* Special Button Variant */
.btn-special {
    background-color: var(--sys-color-special-default);
    color: var(--sys-color-special-text);
    border-color: var(--sys-color-special-default);
    font-weight: var(--font-weight-bold);
}

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

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

.btn-special:focus-visible {
    outline-color: var(--sys-color-special-default);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.btn-special:disabled {
    background-color: var(--sys-color-interactive-disabled);
    border-color: var(--sys-color-interactive-disabled);
    color: var(--sys-color-text-subtle);
    font-weight: var(--font-weight-semibold);
}

/* Submit Button Variant */
.btn-submit {
    background-color: var(--sys-color-submit-default);
    color: var(--sys-color-submit-text);
    border-color: var(--sys-color-submit-default);
    font-weight: var(--font-weight-semibold);
}

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

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

.btn-submit:focus-visible {
    outline-color: var(--sys-color-submit-default);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

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

/* Special outline variants */
.special-outline,
.btn-special-outline {
    background-color: transparent;
    color: var(--sys-color-special-default);
    border-color: var(--sys-color-special-default);
    font-weight: var(--font-weight-bold);
}

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

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