.primary {
    background-color: var(--primary-bg);
    color: var(--primary-text);
}

.transparent {
    background-color: transparent;
    color: var(--surface-text);
}

.primary-text {
    color: var(--primary-bg);
}

.primary.disabled {
    background-color: var(--primary-disabled-bg);
    color: var(--primary-disabled-text);
}

.primary.emphasize {
    background-color: var(--primary-emphasized-bg);
    color: var(--primary-emphasized-text);
}

a.primary:hover,
button.primary:hover {
    background-color: var(--primary-hover-bg);
    color: var(--primary-hover-text);
}

.primary.muted {
    background-color: var(--primary-muted-bg);
    color: var(--primary-muted-text);
}

.secondary {
    background-color: var(--secondary-bg);
    color: var(--secondary-text);
}

.secondary-text {
    color: var(--secondary-bg);
}

.secondary {
    background-color: var(--secondary-bg);
    color: var(--secondary-text);
}

.secondary.disabled {
    background-color: var(--secondary-disabled-bg);
    color: var(--secondary-disabled-text);
}

.secondary.emphasize {
    background-color: var(--secondary-emphasized-bg);
    color: var(--secondary-emphasized-text);
}

a.secondary:hover,
button.secondary:hover {
    background-color: var(--secondary-hover-bg);
    color: var(--secondary-hover-text);
}

.secondary.muted {
    background-color: var(--secondary-muted-bg);
    color: var(--secondary-muted-text);
}

.surface {
    background-color: var(--surface-bg);
    color: var(--surface-text);
}

.hyperlink,
.hyperlink:active,
.hyperlink:visited {
    color: var(--hyperlink-text);
    text-decoration: none;
}

.hyperlink:hover,
.hyperlink:focus {
    color: var(--hyperlink-hover-text);
    text-decoration: underline;
}

.error {
    color: var(--error-text);
}

.success {
    color: var(--success-text);
}