/* Design System Oficial: Macro-Directorio de Mascotas */
:root {
  --color-primary-emerald: #059669;
  --color-primary-emerald-hover: #047857;
  --color-primary-emerald-light: #ecfdf5;
  
  --color-slate-dark: #0f172a;
  --color-slate-header: #1e293b;
  
  --color-amber-cta: #f59e0b;
  --color-amber-cta-hover: #d97706;
  --color-amber-light: #fffbeb;
  
  --color-bg-light: #f8fafc;
  --color-card-white: #ffffff;
}

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

.bg-brand-slate { background-color: var(--color-slate-dark); }
.text-brand-slate { color: var(--color-slate-dark); }

.bg-brand-amber { background-color: var(--color-amber-cta); }
.text-brand-amber { color: var(--color-amber-cta); }

.bg-brand-canvas { background-color: var(--color-bg-light); }