/*!
 * Elmas Color Utilities V2
 * Version: 2.0.0
 * Purpose: Optional utility classes for carefully applying approved design tokens.
 * Use sparingly. Prefer Elementor Global Colors and component styles when possible.
 */

.el-bg-page { background: var(--el-color-surface-page) !important; }
.el-bg-soft { background: var(--el-color-surface-section-soft) !important; }
.el-bg-highlight { background: var(--el-color-surface-highlight) !important; }
.el-bg-card { background: var(--el-color-surface-card) !important; }
.el-bg-dark { background: var(--el-color-surface-dark) !important; color: var(--el-color-text-inverse) !important; }
.el-bg-brand { background: var(--el-color-brand-primary) !important; color: var(--el-color-text-inverse) !important; }
.el-bg-gradient-brand { background: var(--el-gradient-brand) !important; color: var(--el-color-text-inverse) !important; }
.el-bg-gradient-dark { background: var(--el-gradient-dark) !important; color: var(--el-color-text-inverse) !important; }
.el-bg-gradient-soft { background: var(--el-gradient-soft) !important; }

.el-text-primary { color: var(--el-color-text-primary) !important; }
.el-text-muted { color: var(--el-color-text-muted) !important; }
.el-text-brand { color: var(--el-color-brand-primary) !important; }
.el-text-sale { color: var(--el-color-sale) !important; }
.el-text-success { color: var(--el-color-success) !important; }

.el-border-soft { border-color: var(--el-color-border-soft) !important; }
.el-border-strong { border-color: var(--el-color-border-strong) !important; }
.el-card-surface { background: var(--el-card-bg); border: 1px solid var(--el-card-border); box-shadow: var(--el-card-shadow); border-radius: var(--el-radius-lg); }
.el-card-surface:hover { box-shadow: var(--el-shadow-card-hover); }

.el-btn-primary { background: var(--el-button-primary-bg) !important; color: var(--el-button-primary-text) !important; border-color: var(--el-button-primary-bg) !important; border-radius: var(--el-radius-pill); }
.el-btn-primary:hover { background: var(--el-button-primary-bg-hover) !important; border-color: var(--el-button-primary-bg-hover) !important; }
.el-btn-secondary { background: var(--el-button-secondary-bg) !important; color: var(--el-button-secondary-text) !important; border: 1px solid var(--el-button-secondary-border) !important; border-radius: var(--el-radius-pill); }
.el-btn-secondary:hover { background: var(--el-button-secondary-bg-hover) !important; }

.el-sale-badge { background: var(--el-color-sale) !important; color: #fff !important; }
.el-stock-badge { background: var(--el-color-success) !important; color: #fff !important; }