/* ========================================================================== Mevlox Design System — Multi-Brand Theming Usage: add data-brand="tecnologia|datacenter|distribuidora" to Default (no attribute) = Grupo Mevlox (P&B) ========================================================================== */ /* Default = Grupo (P&B) */ :root { --mev-accent: #111827; --mev-accent-light: #374151; --mev-accent-dark: #0a0a0a; --mev-brand-name: 'Grupo Mevlox'; } [data-brand="tecnologia"] { --mev-accent: #2563EB; --mev-accent-light: #60A5FA; --mev-accent-dark: #1D4ED8; --mev-brand-name: 'Mevlox Tecnologia'; } [data-brand="datacenter"] { --mev-accent: #059669; --mev-accent-light: #34D399; --mev-accent-dark: #047857; --mev-brand-name: 'Mevlox Datacenter'; } [data-brand="distribuidora"] { --mev-accent: #97C120; --mev-accent-light: #B8E04A; --mev-accent-dark: #7A9E18; --mev-brand-name: 'Mevlox Distribuidora'; } /* ========================================================================== Accent Utilities ========================================================================== */ .mev-btn-accent { background-color: var(--mev-accent); color: #fff; } .mev-btn-accent:hover { background-color: var(--mev-accent-dark); } .mev-badge-accent { background-color: color-mix(in srgb, var(--mev-accent) 15%, white); color: var(--mev-accent-dark); }