/* Utilidades de color para aplicar tokens rápidamente */

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

.bg-accent {
  background: var(--color-accent);
}
.bg-accent-light {
  background: var(--color-accent-light);
}
.bg-accent-dark {
  background: var(--color-accent-dark);
}

.bg-light {
  background: var(--color-bg-light);
}
.bg-dark {
  background: var(--color-bg-dark);
}
.bg-overlay {
  background: var(--color-overlay);
}

.text-brand {
  color: var(--color-brand);
}
.text-brand-light {
  color: var(--color-brand-light);
}
.text-brand-dark {
  color: var(--color-brand-dark);
}

.text-accent {
  color: var(--color-accent);
}
.text-accent-light {
  color: var(--color-accent-light);
}
.text-accent-dark {
  color: var(--color-accent-dark);
}

.text-inverse {
  color: var(--color-text-inverse);
}
.text-light {
  color: var(--color-text-light);
}

.border-brand {
  border-color: var(--color-brand);
}
.border-accent {
  border-color: var(--color-accent);
}
.border-light {
  border-color: var(--color-bg-light);
}

/* Estados UI */
.bg-hover {
  background: var(--color-hover);
}
.bg-active {
  background: var(--color-active);
}
.bg-disabled {
  background: var(--color-disabled);
}

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

.border-focus {
  border-color: var(--color-focus);
}

/* Gradiente de marca */
.bg-gradient-brand {
  background: var(--gradient-brand);
}