.primary {
    background-color: var(--md-sys-color-primary);
}

.text-on-primary {
    color: var(--md-sys-color-on-primary);
}

.primary-container {
    background-color: var(--md-sys-color-primary-container);
}

.on-primary-container {
    background-color: var(--md-sys-color-on-primary-container);
}

.text-on-primary-container {
    color: var(--md-sys-color-on-primary-container);
}

.secondary {
    background-color: var(--md-sys-color-secondary);
}

.text-on-secondary {
    color: var(--md-sys-color-on-secondary);
}

.secondary-container {
    background-color: var(--md-sys-color-secondary-container);
}

.on-secondary-container {
    background-color: var(--md-sys-color-on-secondary-container);
}

.text-on-secondary-container {
    color: var(--md-sys-color-on-secondary-container);
}

.tertiary {
    background-color: var(--md-sys-color-tertiary);
}

.on-tertiary {
    background-color: var(--md-sys-color-on-tertiary);
}

.tertiary-container {
    background-color: var(--md-sys-color-tertiary-container);
}

.on-tertiary-container {
    background-color: var(--md-sys-color-on-tertiary-container);
}

.text-on-tertiary-container {
    color: var(--md-sys-color-on-tertiary-container);
}

.background {
    background-color: var(--md-sys-color-background);
}

.text-background {
    color: var(--md-sys-color-background);
}

.on-background {
    background-color: var(--md-sys-color-on-background);
}

.text-on-background {
    color: var(--md-sys-color-on-background);
}